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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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