时间戳

首页 > 解决方案 > 没有不透明文本的不透明背景

html - 没有不透明文本的不透明背景

问题描述

我正在尝试制作一个与屏幕一样宽但背景图像略微变暗的 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>

标签： htmlcssopacity

解决方案

将文本放入.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>

推荐阅读