Как затемнить фон в html
Перейти к содержимому

Как затемнить фон в html

  • автор:

Как затемнить фоновое изображение?

Я могу ее довольно просто осветлить при наведении через свойство opacity , но можно ли подобным образом сделать ее темнее?

Отслеживать
задан 28 апр 2022 в 13:30
81 6 6 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.block < --size: 180px; width: var(--size); height: var(--size); background: url(https://picsum.photos/200/300) no-repeat center / cover; transition: filter 0.2s ease-in; >.block:hover
.block < --size: 180px; width: var(--size); height: var(--size); background: url(https://picsum.photos/200/300) no-repeat center / cover; position: relative; >.block::before < width: 100%; height: 100%; display: block; content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.2s ease-in; >.block:hover::before

Отслеживать
ответ дан 28 апр 2022 в 13:34
Михаил Камахин Михаил Камахин
8,780 2 2 золотых знака 19 19 серебряных знаков 59 59 бронзовых знаков
спасибо! пошел изучать фильтры
28 апр 2022 в 13:49
@levensta второй пример с просто opacity
28 апр 2022 в 19:37

  • css
  • background-image
Похожие

Подписаться на ленту

Лента вопроса

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.6.4.10328

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

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

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

 

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

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

.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after

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

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

background-color: rgba(0,0,0,0.5);

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

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

.item-photo < position: relative; >.item-photo img < width: 100%; >.item-photo:after

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

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

Затемнение изображения и фона с помощью CSS

Несколько примеров как затемнить изображение в свойстве background и теге .

Затемнение

Первый способ затемнить img

Сделать тёмный фон под изображением , а самому изображению добавить прозрачность с помощью opacity .

.image < background: #000; >.image img
Пример:

Второй способ затемнить img

CSS фильтр Фильтр brightness у .

.image img
Пример:

Третий способ затемнить img

Полупрозрачный элемент над .

Пример:
.image < position: relative; >.image-filter
Пример:

Затемнение фона background

Если картинка задана через свойство background , то есть два способа ее затемнить:

Первый способ затемнить background

Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .

.image < position: relative; height: 420px; width: 100%; background: url(/image.jpeg) 0px 0px no-repeat; background-size: cover; >.image:before

Подскажите, как сделать затемнение фона? (полупрозрачным цветом)

Сейчас на многих сайтах используется такое затемнение, но я не нашел, как его сделать. Например у header есть картинка на фоне, а поверх нее текст. Но чтобы текст читался, поверх картинки накладывается полупрозрачный черный например фон. Как его сделать? Для header имеются такие свойства:

header < height: 538px; width: 100%; background: url(../img/header-bg.png) no-repeat center center; background-size: cover; >

Отслеживать
user212578
задан 3 мая 2017 в 8:19
PolonskiyP PolonskiyP
239 2 2 золотых знака 5 5 серебряных знаков 14 14 бронзовых знаков
Возможный дубликат вопроса: как исключить применение стиля к дочерним селекторам CSS
12 фев 2018 в 19:04

8 ответов 8

Сортировка: Сброс на вариант по умолчанию

header < position: relative; background: url(https://amazingcarousel.com/wp-content/uploads/amazingcarousel/3/images/lightbox/golden-wheat-field-lightbox.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; >header:after < content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 2; >.inner
 

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, eligendi.

Отслеживать
ответ дан 3 мая 2017 в 12:28
22.5k 11 11 золотых знаков 60 60 серебряных знаков 121 121 бронзовый знак

Это ответ на ваш вопрос:

background: linear-gradient( rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.5) ), url('/img/back/home-back.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: top; 

Отслеживать
51.7k 205 205 золотых знаков 67 67 серебряных знаков 254 254 бронзовых знака
ответ дан 3 янв 2018 в 16:52
Alisher Aidarkhanov Alisher Aidarkhanov
129 2 2 серебряных знака 7 7 бронзовых знаков

Наложить полупрозрачный блок c rgba бэкграундом (где 4й параметр прозрачность) и с абсолютным позиционированием. HTML:

.header < position: relative; >.cover < background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; >.content

Отслеживать
ответ дан 3 мая 2017 в 11:21
317 5 5 серебряных знаков 13 13 бронзовых знаков

отличный простой вариант, но он затемняет и весь остальной контент, и z-index-ом почему-то не регулируется.

3 мая 2017 в 13:19
Отредактировал, думаю так понятней. Мы накладываем блок поверх.
3 мая 2017 в 16:45

Тоже понадобилось такое решение, в итоге не подходили предложения через ::after , position и z-index . В этих случаях нужно все элементы на странице поднимать на позицию выше. Через filter и opacity тоже не вариант, затемняется всё.
Решение простое.

 background: url('../img/header/bg.jpg') no-repeat center /cover, #555555; background-blend-mode: hard-light;//или multiply 

Можете хоть зелёной сделать. И ни где ничего не надо менять.

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

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