如何在背景图像上添加叠加不透明度？ [复制]
Posted
技术标签:
【中文标题】如何在背景图像上添加叠加不透明度？ [复制]【英文标题】：How to add overlay opacity over a background image? [duplicate] 【发布时间】：2018-09-01 17:47:24 【问题描述】：我想要实现的目标听起来很简单，但我无法让它发挥作用。
我正在尝试在image 顶部添加opacity，以便< h1 > 标记更易于阅读。
这是我的 HTML：
<header>
<section>
<div class="img_content">
<div class="bg_img" style="background-image: url('path-to-image');" >
<div class="container">
<h1 class="content_h1">Most Popular Lunches: Week 11</h1>
</div>
</div>
</div>
</section>
</header>
这是 CSS：
/*Custom CSS */
.img_content
/* background: url(); */
background-repeat: no-repeat;
background-size: cover;
header section
padding:0;
@media screen and (max-width: 768px)
.content_h1
font-size: 40px;
padding: 21% 0;
color: white;
font-size: 14px;
.section_details
padding: 8% 0 19% 8%;
font-size: 14px;
section
padding: 10px 0;
.bg_img
background: #221f1f73;
.content_h1
font-size: 85px;
padding: 14% 0;
color: white;
.section_details
padding: 4% 0 0 0;
font-size: 14px;
我认为问题可能是-Z index 或类似的东西？
【问题讨论】：
你想在h1还是bg_img上设置不透明度？ bg_img 请！ 你能检查一下，看看你是否可以解决类似的问题：***.com/questions/49333122/css-border-confusion/… 【参考方案1】：您不能在背景图像上设置不透明度，因为它将被 bg_img div 中的元素继承（因此 h1 将继承相同的不透明度）
您需要做的是使用 rgba 设置不透明度
.bg_img
// this css rule is setting the opacity if image to 0.5
background-color: rgba(34,31,31, 0.5);
【讨论】：
【参考方案2】：你可以这样做：
.bg_img
background: #221f1f73;
opacity: 0.7;
Jsfiddle
【讨论】：
这样，h1会继承同样的不透明度...【参考方案3】：尝试使用“背景混合模式”属性..
【讨论】：
【参考方案4】：试试这个
<header>
<section>
<div class="img_content">
<div class="bg_img" style="background-image: url('https://i.stack.imgur.com/GsDIl.jpg');">
<div class="container">
<h1 style="position:relative;z-index: 100;" class="content_h1">Most Popular Lunches: Week 11</h1>
</div>
<div class="overlay" style="position:absolute;height:100%;width:100%;top:0;left:0;background:rgba(0,0,0,0.5)"></div>
</div>
</div>
</section>
</header>
CSS
.img_content
/* background: url(); */
background-repeat: no-repeat;
background-size: cover;
header section
padding:0;
@media screen and (max-width: 768px)
.content_h1
font-size: 40px;
padding: 21% 0;
color: white;
font-size: 14px;
.section_details
padding: 8% 0 19% 8%;
font-size: 14px;
section
padding: 10px 0;
.bg_img
background: #221f1f73;
position:relative;
.content_h1
font-size: 85px;
padding: 14% 0;
color: white;
.section_details
padding: 4% 0 0 0;
font-size: 14px;
为了方便，我使用了内联 css，虽然不推荐
【讨论】：
【参考方案5】：试试这个。
.page-heading
background: url(../images/sample/image.jpg) no-repeat fixed 50% 0px / cover;
opacity: 0.9;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
position: relative;
text-align: center;
padding: 75px 0px;
width:100%;
【讨论】：
【参考方案6】：保持您的 html 与发布的相同。然后按照下面的操作： 首先，您需要设置类 '.bg_img'，如下所示：
.bg_img
background: #f5f5f5;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
然后使用 '::before' 伪类添加背景覆盖
.bg_img::before
content:"";
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
display: block;
background-color: rgba(0,0,0,.55);
最后将 'position: relative' 添加到 '.content_h1' 类中，如下所示：
.content_h1
font-size: 85px;
padding: 14% 0;
color: white;
position: relative;
【讨论】：
【参考方案7】：你可以试试这个方法
h1
font-size: 50px;
color:#fff;
position: relative;
z-index: 10;
.bg_img
position: relative;
background:url(https://preview.ibb.co/k2cREc/banner_about.jpg) no-repeat;
background-size:cover;
height: 400px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
.bg_img:after
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
<section>
<div class="img_content">
<div class="bg_img">
<div class="container">
<h1 class="content_h1">Most Popular Lunches: Week 11</h1>
</div>
</div>
</div>
</section>【讨论】：
【参考方案8】：有两种方便的方法来完成此操作，一种通过background-image 设置多个背景，另一种通过background-blend-mode 设置。
选项 1。
background-image: linear-gradient(rgba(0,0,0,.5)), url(path-to-image);
对于此选项，您通过利用 background-image 的线性渐变选项设置一个半透明的黑色背景，具有单个值（尽管您可以使用多个值来获得一些视觉兴趣），然后添加图像作为其后面的第二个背景。根据需要调整值。
选项 2。
background-blend-mode: multiply;
background-color: #666666;
对于此选项，您不想使用黑色，因为您根本看不到图像。您在视觉上实现了几乎相同的效果，但是以更易于阅读的不同方式进行。同样，根据需要调整颜色。
最后一点：.bg_img 类的背景颜色无效。十六进制颜色应该只有 6 个字符，其中前 2 个为红色，接下来的两个为绿色，最后两个为蓝色。数字范围从 00（十六进制表示 0）到 ff（十六进制表示 255）。每两个字符组合指定混合多少红色、绿色或蓝色光以创建最终颜色值。 （当使用三个字符时，每个字符都加倍，例如，#0fc 将等同于 #00ffcc）。十六进制值应始终包含 3 或 6 个字符。
【讨论】：
我喜欢选项 1，但线性渐变需要 2 个参数，所以我修复了它重复第一个参数，例如： background-image: linear-gradient(rgba(0,0,0,.5) ,rgba(0,0,0,.5)), url(图像路径);【参考方案9】：尝试在这里使用:before 伪元素和position: absolute 来覆盖图像
.bg_img
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 0;
.bg_img:before
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #221f1f73;
z-index: -1;
header section
padding: 0;
@media screen and (max-width: 768px)
.content_h1
font-size: 40px;
padding: 21% 0;
color: white;
font-size: 14px;
.section_details
padding: 8% 0 19% 8%;
font-size: 14px;
section
padding: 10px 0;
.content_h1
font-size: 85px;
padding: 14% 0;
color: white;
.section_details
padding: 4% 0 0 0;
font-size: 14px;
<header>
<section>
<div class="img_content">
<div class="bg_img" style="background-image: url(http://lorempixel.com/400/200/sports);">
<div class="container">
<h1 class="content_h1">Most Popular Lunches: Week 11</h1>
</div>
</div>
</div>
</section>
</header>【讨论】：
以上是关于如何在背景图像上添加叠加不透明度？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章