фон непрозрачности без текста непрозрачности - PullRequest
Новая
       14

фон непрозрачности без текста непрозрачности

0 голосов
/ 30 сентября 2018

Я пытаюсь сделать div такой же ширины, как экран, но с немного затемненным фоновым изображением, но он также делает затемненный текст.Как это можно изменить, чтобы затемнить только фоновое изображение, а не наложить текст, пожалуйста? 

.venue-header-text {
  font-size: 3.5em!important;
  font-weight: 700!important;
  color: white!important;
}

.inner-slider .slide {
  padding: 100px 0 100px;
  position: relative;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  color: white!important;
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6)!important;
}
<div class="text-center">
  <section class="inner-slider hyr-section-height-override">
    <div class="slide" style="background-image:url('/site-data/articles/venue1/header.jpg');">
      <div class="container">
        <h2 class="venue-header-text">VENUE 1</h2>
      </div>
      <div class="slide-overlay"></div>
    </div>
  </section>
</div>

1 Ответ

0 голосов
/ 30 сентября 2018

Поместите текст в элемент .overlay.Его цвет фона будет непрозрачным, но текст не будет: 

.venue-header-text{
    font-size:3.5em!important;
    font-weight:700!important;
    color:white!important;
}
.inner-slider .slide {
    padding: 100px 0 100px;
    position: relative;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color:white!important;
}

.slide-overlay {
    position: absolute;
     top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6)!important;
}
<div class="text-center">
<section class="inner-slider hyr-section-height-override">
<div class="slide" style="background-image:url('https://lorempixel.com/output/technics-q-c-640-480-2.jpg');">
<div class="container">

</div>
<div class="slide-overlay"><h2 class="venue-header-text">VENUE 1</h2></div>
</div>
</section>
</div>
...