css градиент с прозрачностью

Такой эффект можно сделать с помощью :before у родительского элемента. Поверх изображения помещается абсолютный блок с градиентом и полупрозрачностью opacity.

Вариации градиентов можно посмотреть в статье «Сборник градиентов».

Пример

Дополнение иконкой

У родителя остается свободным псевдоэлемент :before, c помощью него наложим иконку по центру картинки.

Градиент при наведении курсора

Плавное появление

Применение в галереи

Для галереи рассмотренной в предыдущей статье, добавим данный эффект.

не кросбраухено, ну и хрен с ним
а что у вас с гуглом?

именно, что такой элемент должен на всех браузерах и устройствах выглядеть эффективно, а иначе косяк

а гугол предложил пару скриптов, по цветоградиентам по тексту — тоже не решение, так как нужна прозрачность

Представьте: 1. на весь фон — картинка; 2. на весь фон — градиент

А можно ли это смешать? Допустим, что бы была фоновая картинка, а поверх нее слабый полупрозрачный градиент, скажем сверху (255,255,255.0,6), а с низу (255,255,255.0,4). Так можно сделать? Сам пробовал и писать этот градиент, и гуглить.. вообщем самоделкин из меня никакой. Может кто посоветовать решение? (Ну если такое возможно)

2 ответа 2

Вот такой вариант есть: пример Точно работает в IE 10+ и последних версиях Firefox/Opera/Chrome

Делается такое с помощью обычного градиента:

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459

Оцените статью