2

Помогите сделать картинку opacity 0.6 чтобы на фоне background-color был виден Вот пример что мне нужно сделать

Пример

Html

<section class="banner">
    <div class="container">
     <div class="item">
       <h1>We’re an Independent Design and <span>Development</span> Agency</h1>
     </div>
    </div>  
</section>

Css

.banner{
   background: rgba(0,0,0, 0.6) url("../images/banner.jpg") no-repeat;
   background-size: cover;
}

4 ответа 4

3

Поменяй их местами и замени фон на другой background:

html, body, div {
  height: 100%;
  margin: 0;
}

div {
  background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.6)), url(https://i.stack.imgur.com/tgLtG.jpg);
  font-size: 6em;
  color: white;
}
<div>Just a text</div>

1
  • Спасибо вам большое очень помогли ))) 7 апр 2017 в 14:12
3

Наложите затемняющий псевдоэлемент поверх блока с картинкой в фоне, не забудьте расположить контент сверху псевдоэлемента.

.bg {
  background: url(http://placeimg.com/500/300/any);
  width: 500px;
  height: 300px;
  position: relative;
}

.bg:after {
  position: absolute;
  content: '';
  left:0; top:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.bg__content {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: #fff;
}
<div class=bg>
  <div class=bg__content>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus sunt facilis incidunt laudantium perferendis numquam assumenda, blanditiis deserunt quisquam velit sit dolorem explicabo, nihil libero, voluptatibus nulla ullam! Aliquam, provident.</div>
</div>

2
  • О, а я уже похожее запостил :)
    – Qwertiy
    7 апр 2017 в 14:17
  • именно, но я раньше ) 7 апр 2017 в 14:17
1

Можно использовать псевдоэлемент с отрицательным z-index:

html, body, div {
  height: 100%;
  margin: 0;
}

div {
  position: relative;
  background: rgba(0,0,0,.6);
  font-size: 6em;
  color: white;
}

div::before {
  content: "";
  background: url(https://i.stack.imgur.com/tgLtG.jpg);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
<div>Just a text</div>

3
  • Спасибо снова но предыдущий ответ был намного легче 7 апр 2017 в 14:16
  • @ArmanGhazaryan, согласен. Но у этого должна бы поддержка браузерами быть побольше - те, которые множественные фоны не умели: caniuse.com/#feat=multibackgrounds vs caniuse.com/#feat=css-gencontent (IE8 и Opera 10-).
    – Qwertiy
    7 апр 2017 в 14:19
  • @ArmanGhazaryan, я неправильно поддержку того способа оценил - градиенты тоже не везде есть: caniuse.com/#feat=css-gradients. Получается, у этого ещё IE9. А IE8 в обоих лесом из-за caniuse.com/#feat=css3-colors
    – Qwertiy
    7 апр 2017 в 14:22
0

Сделай полупрозрачную картинку и сохрани в png.

Формат jpg не поддерживает прозрачность.

3
  • Это совет-вредитель — фоновую картинку на весь экран сохранять в пнг :) 7 апр 2017 в 14:08
  • щяс попробую спасибо 7 апр 2017 в 14:08
  • @SashaOmelchenko, ну не в gif же?)))
    – Qwertiy
    7 апр 2017 в 14:12

Ваш ответ

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

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