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

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

Ответ

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