Как сделать затемнение в css

Как сделать css затемнение фона

В одной из своих статей я писал, как сделать появление текста при наведении на картинку. И там как — раз использовался эффект затемнения заднего фона, чтобы текст на переднем плане хорошо читался. Т. к. темный фон — overlay я часто использую на своих сайтах в качестве подложки в различных блоках, то решил рассмотреть процесс его создания в отдельной статье.

Допустим, у нас есть блок <div> c произвольным бэкграундом, поверх которого нам надо сделать css затемнение фона:

Разметка блока:

На этом все. Надеюсь, что статья была вам полезной!
ДЕМО СКАЧАТЬ

Как сделать затемнение фона (картинки) на CSS

Сразу оговоримся, что решить такую задачу, как затемнение фона для картинки, можно различными способами. Нет какого-то одного правильного метода. Вы делаете так, как вам удобно и как лучше подходит для вашего конкретного случая.

Для начала пропишем html для наглядности:

Здесь мы вставили свою картинку внутрь блока с классом item-photo.

И дальше перейдем к CSS

Что мы здесь делаем? Мы добавляем через псевдоэлемент :after прозрачный фон поверх блока с классом item-photo.

Обратите внимание на эту строчку

Здесь мы задаем фон нашему псевдоэлементу. Если бы мы вместо 0.5 прописали бы 1, то картинку полностью покрыл бы черный фон. Вы можете поэкспериментировать и выбрать любое другое число в пределах 0 и 1.

Еще можно задать градиент, вместо простой заливки. То есть, к примеру, чтобы затемнение было к низу картинки. Вот как это можно сделать:

Затемнение картинки

Затемнение картинки

Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях &#8212; уверены, он будет очень полезен для новичков.

Как сделать затемнение фона через CSS

Все чаще стоит задача сделать затемнение картинок на сайте. Я собрал три способа, чтобы сделать это.

1 Способ. Используя свойство background-image

2 Способ. Используя свойство filter

3 Способ. С помощью opacity

Данный способ является наиболее объемным, но он также заслуживает внимания.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *