4

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

Вот так у меня получается

2
  • Вынесите блок с текстом за пределы блока с фоном. Тогда opacity не будет на него действовать.
    – user31906
    10 апр 2016 в 5:37
  • Добавьте код этого элемента, иначе вам никто не сможет помочь 11 апр 2016 в 13:31

1 ответ 1

6

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

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

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

<div class="myDiv">
    <div class="bg"></div>
    I am a transparent image
</div>


.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

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

<div class="container">
  <div class="sign">
    <p>Free Beautiful Photo</p>
  </div>
</div>

.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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.