Фоновое изображение с наложением обложки.

Я работаю над фоновым изображением, которое размещено со встроенным стилем и имеет красный оттенок, накладывающийся на изображение.

Проблема возникает, когда красный оттенок покрывает содержимое.

Как сделать, чтобы красный оттенок шел под кнопками и текстом?

Пожалуйста, смотрите JS Fiddle

Ценим помощь

#cover-wrap {
  position: relative;
}
#cover-wrap .black-cover {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
}
#backgrond-cover {
  background-color: #37383a;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 50px;
  color: #fff;
  position: relative;
}
#backgrond-cover .username {
  font-weight: bold;
  margin-top: 10px;
}
#backgrond-cover .location {
  font-size: 14px;
}
#backgrond-cover .summary {
  font-size: 14px;
  margin-bottom: 20px;
}
Источник

5 ответов

Попробуйте это.. я внес некоторые изменения, которые делают то, что вы хотите.

<div id="cover-wrap">
 <div class="black-cover"></div>  
    <div id="background-cover" class="center">
          <div id='box'>  
          <img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
              <p class='username'>Cloud #3</p>
              <p class="location">Birmingham</p>
              <p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>

            <button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>

            <button class="hangout-btn">Hang out</button>
          </div>
    </div>
</div>
  <!-- html ends here -->

  <!-- css looks like this -->


 #cover-wrap
    {
      position: absolute;
      width: 1350px;
    }
 .black-cover 
    {
      background-color: rgba(255, 0, 0, 0.5);
      position: absolute;
      width: 100%;
      height: 100%;
    }
 #backgrond-cover 
    {
      background-color: #37383a;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
       background-size: cover;
       padding: 50px;
       color: #fff;
       background-image: url('http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg');
      display: inline-block;
      height: 100%;
      width:92.6%;
    } 

 #box  
    {
       position: relative;
    }
 #backgrond-cover .username 
    {
       font-weight: bold;
       margin-top: 20px;
    }
 #backgrond-cover .location 
    {
       font-size: 14px;
    }
 #backgrond-cover .summary {
       font-size: 14px;
       margin-bottom: 20px;
    }
   /*css ends here */
Источник

Если вы хотите, чтобы кнопки были поверх наложения красного оттенка. затем переместите кнопки над плоскостью красного оттенка.

чтобы добиться этого, вам нужно присвоить кнопке z-индекс (представьте ось z на графике), положительное значение поднимает ее выше, а отрицательное значение толкает вниз. Но чтобы дать относительное положение оси z, вы также должны указать положение css относительно

добавить эту CSS в конец вашего кода...

   button{
       position:relative;
       z-index:10;
   }

теперь это будет предназначаться для всех кнопок на странице. Если вы хотите настроить таргетинг только на определенные кнопки, присвойте кнопкам идентификатор или класс.

Также в вашем коде есть закрытый тег абзаца . Не уверен, что у вас была ошибка вставки копии или нет

Источник

Просто добавь это

#backgrond-cover p, #backgrond-cover span, #backgrond-cover button, #backgrond-cover img {
  position: relative;
    z-index: 20;
}

и добавить z-index: 10; в #cover-wrap .black-cover, Должен сделать свое дело.

Источник

Если вы хотите создать оверлей, сделав его абсолютным, но охватывая контент, тогда вы можете играть с z-index. Сначала установите z-index контейнера на 1, затем добавьте z-index -1 к оверлею. Это должно сделать наложение под контентом.

.item{
  background: url(https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/1824627/logotypes_1x.jpg);
  background-size: cover;
  
  width: 300px;
  height: 300px;
  position: relative;
  z-index:1;
}
h1{color: white}
.item:after{
  content:"";
  background: rgba(255,0,0,.5);
  position: absolute;
  top: 0;
  bottom:0;
  left:0;
  right: 0;
  z-index:-1;
}
<div class="item">
  <h1> content here</h1>
</div>

Приведенный выше фрагмент кода использует псевдоэлемент after, чтобы сделать оверлей более легким, используя другой HTML-тег.

я реструктурировал ваш код, удалив ненужный тег, вы можете проверить его здесь http://jsfiddle.net/rzp318kb/6/

Источник

Извините, не прочитал вопрос. Я обновил с этим сейчас работает. Вам нужно установить z-индекс на всех элементах, которые вы хотите, выше красного града, или, как я сделал, оберните их все в элемент div и расположите его выше града. Обратите внимание, что вам нужно расположить все элементы, для которых вы хотите использовать z-index.

http://jsfiddle.net/MatrixMe/8pmdzms8/1/

HTML

http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg ') ">

      <div class="content-wrapper">
          <img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
        <p class="username">Cloud #3<p>
        <p class="location">Birmingham</p>
        <p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
        <button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
        <button class="hangout-btn">Hang out</button>   
     </div>        
      <div class="black-cover"></div>

CSS

/*Cover Info*/
#cover-wrap {
  position: relative;
}
div.black-cover {
  background-color: rgba(255, 0, 0, 0.5);
  position: relative;
  top: 0px;
  z-index: 10;
  width: 100%;
  height: 100%;
}
.content-wrapper {
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 100%;
    left: 20%;
    top: 20%;
    display: inline-block;
}
#backgrond-cover {
  background-color: #37383a;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
  position: absolute;
  display: inline-block;
   z-index: -1;
  width: 100%;
  height: 300px; 
}
#backgrond-cover .username {
  font-weight: bold;
  margin-top: 10px;
}
#backgrond-cover .location {
  font-size: 14px;
}
#backgrond-cover .summary {
  font-size: 14px;
  margin-bottom: 20px;
}
Источник
Другие вопросы по тегам