Как затемнить или засветлить фон так, чтобы при этом текст, который находится на фоне, не подлежал изменению?
Ответ
1. Если речь идет о том случае, когда фон - это изображение, то прозрачность влияет на весь элемент, включая его содержание, и нет никакого способа изменить это поведение.
Вы можете обойти эту проблему двумя следующими способами:
"Запасной" ДИВ
Добавьте еще один элемент DIV в контейнер для хранения фона. Это самый кроссбраузерный дружественный метод и будет работать даже на IE6.
.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
Можно добавить псевдоэлемент, у которого будет добавлен фон и прозрачность.
.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