Html как картинку сделать прозрачной

Все сервисы Хабра. Asprod Asprod.

Как наложить на картинку прозрачный фон и текст?

Дизайнеры любят размытый фон. И дело легко решалось бы вставкой сразу размытой картинки. Но не тут-то было. Картинка должна меняться или при наведении переставать быть размытой.

Все сервисы Хабра. Посмотрите на вложенную картинку. Сверстал тексты, форму, но как в css сделать прозрачный фон? Конечно же, rgba. Ещё можно почитать про background-blend-mode , однако поддержка этого чуда пока невсеобъемлюща.

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями. Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черным, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном. Но если мы сделаем фон светлее, например background: AB7 , то он начнет просвечивать, а белый и вовсе будет прозрачным. Также стоит отметить, что для такого эффекта с прозрачным текстом подойдут только светлые фоновые изображения.

Похожие статьи

• Все для дома интерьер картинки
• Режим дня школьника картинки
• Красивая картинка поздравление с днём рождения
• Одежда зимняя раскраски картинки