没有不透明文本的不透明背景
opacity background with no opacity text
我正在尝试制作与屏幕一样宽但背景图像略微变暗的 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>
将文本放入 .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>
我正在尝试制作与屏幕一样宽但背景图像略微变暗的 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>
将文本放入 .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>