Затемнение/засветление у разных объектов в одном блоке

#css #html5 #css3 #opacity

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


    

Ответы

Ответ 1

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

"Запасной" ДИВ

Добавьте еще один элемент DIV в контейнер для хранения фона. Это самый кроссбраузерный
дружественный метод и будет работать даже на IE6.


    

    I am a transparent image



.myDiv {
  position: relative;
  z-index: 5;
  height: 300px;
  width: 700px;
  color: #000;
  font-size: 400%;
  padding: 20px;
  margin-top: 40px;
  font-family: Arial;
  text-transform: capitalize;
}

.myDiv .bg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc url('https://images.unsplash.com/photo-1436564989038-18b9958df72b?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375')
center center;
  opacity: .4;
  width: 100%;
  height: 100%;
}


Псевдоэлементы :before и ::before

Можно добавить псевдоэлемент, у которого будет добавлен фон и прозрачность.


  

    
Free Beautiful Photo
  


.container{
  width: 700px;
  max-width: 100%;
  height: 200px;
  display: block;
  position: relative;
}

.container:before {
  content: "";
  background: green url('https://images.unsplash.com/photo-1438755582627-221038b62986?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375')
0 0 no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

.sign{
  position: absolute;
  top: 50%;
  left: 50%;  
  margin-left: -124px;
  transform: translateY(-50%);
}

.sign p{
  font-size: 20px;
  text-transform: uppercase;
  color: green;
  font-weight: bold;
  font-family: Arial;
}


Дополнительные замечания

Из-за поведения z-index вам придется установить z-index для контейнера, а также отрицательный
z-index для фонового изображения.

Ответ на этот вопрос уже давался на stackoverflow на английском. Там же есть код
и ссылки на jsfiddle.
Ссылка на ответ

Еще один источник на английском языке

Мой тестовый JSFiddle

2. Если речь идет о случае, когда фон - это просто какой-либо цвет, прозрачность
которого нужно изменить то используйте CSS-свойство backround-color: rgba(0, 0, 0, 0.5);

Ответ на такой вопрос на stackoverflow in english