如何在保持文本 100% 可见的同时降低背景图像不透明度?

Question

标题的background img应该是半透明的，文本应该是完全可见的。

我已经在这个网站和其他网站上尝试了许多修复程序，包括使用:before

HTML：

<div class="banner">
<div class="bannerimage">
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
<a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
</div>
</div>
</div>

CSS：

.banner {
width: 100%;
}
.bannerimage {
background-image: url("img/banner.jpg");
position: relative;
height: 500px;
}
.bannerimage:before{
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
opacity: 0.4;
}
.bannertext {
color: 111;
position: relative;
text-align: right;
}

背景应translucent前景文本应solid。

Answer 1

您可以使用此代码

body {
margin: 0;
padding: 0;
}   
.banner {
width: 100%;
}
.bannerimage {
width: 100%;
height: 500px;
display: block;
position: relative;
background: rgba(0,0,0,0.7);
}
.bannerimage::after {
content: "";
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;   
}
.bannertext {
color: 111;
position: relative;
text-align: right;
}
.bannertext h1 {
margin-top: 0px;
color: #fff;
}
.bannertext h2 {
color: #fff;
}
.bannertext a {
color: #fff;
}

<div class="banner">
<div class="bannerimage">
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
<a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
</div>
</div>
</div>

Answer 2

如果你给父.banner图像不透明度，它会影响它的子图像。因此，请像这样更新您的代码：

.banner {
width: 100%;
position: relative;
}
.bannerimage {
background-image: url(https://via.placeholder.com/1000x700);
position: relative;
height: 500px;
opacity: 0.5;
background-size: cover;
}
.bannertext {
color: #111;
text-align: right;
position: absolute;
top: 0;
width: 100%;
}

<div class="banner">
<div class="bannerimage">
</div>
<div class="bannertext">
<h1>Welcome to my Portfolio</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h2>
<a href="#">A link <span><i class="fas fa-caret-right"></i></span></a>
</div>
</div>