Тонированные изображения с помощью множественных фоновых изображений
17 февраля 2019 | Опубликовано в css | Нет комментариев »
Свойству фона в CSS можно задавать значения, разделенные запятой, т. е., множественные фоновые изображения. Их можно представить как наложенные друг на друга фоны, так как у них есть порядок наложения. Если наложить прозрачный цвет на изображение, можно его затонировать. Возможно, это делается не так очевидно, как можно было бы ожидать.
Вероятно, первым предположением будет использовать просто полупрозрачный цвет и изображение, примерно следующим образом:
/* Внимание, этот способ не работает! */ .tinted-image { background: /* верхний слой, прозрачный красный */ rgba(255, 0, 0, 0.25), /* нижний слой, изображение */ url(image.jpg); }
К сожалению, этот способ не работает. Вероятно потому, что это цвет фона, а не фоновое изображение, так что вместо использования заливки цветами с прозрачностью, такими как rgba() или hsla(), нам нужно будет использовать градиент. Технически градиенты являются фоновыми изображениями, так что применим линейный градиент с прозрачностью без переходов:
/* Работающий способ */ .tinted-image { background: /* верхний слой, прозрачный красный, созданный с помощью градиента */ linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) ), /* нижний слой, изображение */ url(image.jpg); }
В результате получим:
На наш взгляд, это очень удобный способ.
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191