CSS Masking (Webkit) - Как кодировать этот круг?

Question

Прежде всего, я очень новичок в веб-дизайне и на этом сайте.

Я бы задал этот вопрос в чате, но у меня недостаточно репутации, и я не думаю, что могу ответить на существующий ответ, поэтому надеюсь, что все будет в порядке, если я отправлю этот вопрос здесь :

Вопрос о "webkit-mask-image" и этой теме здесь: flexslider border-radius does not wrap image in Chrome, Safari, but will in Firefox.

вопрос ответил с этим кодом: "-webkit-маска изображения: URL (данные: изображение/PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC"

Я просто хочу, чтобы попытаться получить мою голову вокруг этого как я все еще участвую, но может ли кто-нибудь определить этот код для меня, пожалуйста? Является ли это форматом SVG?

Что такое URL-ссылка, или именно так написано, чтобы «вызвать» образ данных, png -64 (я думал, что это дошло до 24 (!)) С кодами из формата SVG?

Итак, я спрашиваю о вышеуказанном коде:

1) url: Цель URL-адреса и связана ли она с внешним источником?

2) данные: image/png; base64: Какие варианты могут быть?

3) iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA + oJAAAAAElFTkSuQmCC: Производная SVG из программы на основе вектора, как Illustrator?

Большое спасибо за ваше время, я просто хочу понять вещи, прежде чем я их реализую.

Answer 1

1. Чаще всего URL-адрес используется в контексте определения фонового изображения. Вы инструктируете загрузить указанное изображение из заданного uri. Вы можете узнать больше об этом here. Пример:

   background-image: url ("images/darkpattern.png");

2. image/png - это так называемый MIME-TYPE и определяет, какой тип содержимого вы описываете (текст, видео, аудио, изображение, ...). Таким образом, вы можете вставлять любые типы носителей. Base64 - используемая кодировка и в этом случае представляет собой схему представления двоичных данных в формате ASCII.

3. Что здесь делается, вместо загрузки изображения png, которое хранится где-то на веб-сервере, включить содержимое этого изображения прямо в css. Если бы вы открыли этот png-файл в своем блокноте, вы увидите множество странных символов, специфичных для его кодирования. Кодировка в base64 должна быть эквивалентна строке выше («iVBORw0KGgoAAAA ...»). Вы должны учитывать, что с помощью этой техники вы сохраняете запрос, но в то же время теряете способность кэшировать изображение. Это означает, что каждый запрос будет загружать изображение еще раз, поэтому это рекомендуется только для небольших изображений. Лично мне не нравится этот метод в целом.