Затемнение изображений простым и быстрым способом на чистом CSS
12 мая 2017 | Опубликовано в css | 1 Комментарий »
Этот способ можно считать несколько устаревшим из-за наличия режимов наложения фона, хотя режимы наложения не поддерживаются во всех версиях браузеров Internet Explorer и Edge, многих мобильных браузерах и только частично поддерживается в браузерах Safari, так что этот способ можно использовать как обходной путь.
В CSS нет возможности напрямую задать прозрачность фону, но есть простой способ для имитации этого с помощью множественных фоновых изображений. Этот способ основывается на том, что свойству фонового изображения можно задать цвет, в том числе и в формате rgba, который включает значение прозрачности.
Размытие фона можно использовать для усиления контраста между текстом и изображением, находящимся за ним. Конечно, можно уменьшить прозрачность изображения, обработав его в программе PhotoShop, но для этого обычно нужно многократное повторение подбора цветов в программе-редакторе изображений и проверки получившегося результата в браузере, в то время как изменение значений в коде CSS требует намного меньше времени и усилий.
Фоновое изображение до затемнения
В записи свойства множественных фоновых изображений первым идет самый верхний фон, так что составная фотография, выполненная Thomas Shahan, располагается последней:
h1 { font-family: Calluna Sans, Arial, sans-serif; color: #fff; margin-top: 0; background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('bugs.jpg'); font-size: 5rem; padding: 2rem; text-align: center; background-repeat: no-repeat; background-size: cover; word-spacing: 5rem; }
Применим этот код CSS к коду HTML ниже:
<h1>Бешеный жук</h1>
И получим результат, показанный далее. Изменение затемнения фонового изображения достигается просто увеличением последнего значения (alpha), которое задает прозрачность, в записи цвета фона в формате rgba.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений 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