Html 使用伪类减少背景图像的不透明度，但不减少文本

因此，下面的代码可以影响“我的容器”背景图像的不透明度，而不影响“h1”的不透明度，这是所需的结果

HTML:

有关此代码的一些问题：

为什么在.my容器类中要求“overflow:hidden”

我发现，如果我更改或删除“.my container:before”中的任何属性值对，则背景图像根本不会显示。具体来说，为什么需要将“内容”设置为“”？ 为什么宽度和高度都必须有一个值？这需要在%中吗

---

谢谢

您可以在

h1

中添加更高的

z索引

.my container{
位置：相对位置；
背景#5C97FF；
溢出：隐藏；
}
.我的集装箱：以前{
内容：''；
显示：块；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
z指数：1；
不透明度：0.6；
背景图像：url（'http://placekitten.com/1500/1000');
背景重复：无重复；
背景位置：50%0；
-ms背景尺寸：封面；
-o-背景尺寸：封面；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
h1{
位置：相对位置；
z指数：2；
}

苏格兰威士忌

您可以向

h1

.my container{
位置：相对位置；
背景#5C97FF；
溢出：隐藏；
}
.我的集装箱：以前{
内容：''；
显示：块；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
身高：100%；
z指数：1；
不透明度：0.6；
背景图像：url（'http://placekitten.com/1500/1000');
背景重复：无重复；
背景位置：50%0；
-ms背景尺寸：封面；
-o-背景尺寸：封面；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
h1{
位置：相对位置；
z指数：2；
}

苏格兰威士忌

回答您的问题：

• 否，溢出：此效果不需要隐藏
• 如果未设置内容属性，则伪元素将无效且不显示
• 伪元素在第一次设置时本质上是空的，因此必须设置宽度和高度。因为.my container具有position:relative设置100%使放置在文本之前的伪元素与container元素的大小相同

---

回答您的问题：

• 否，溢出：此效果不需要隐藏
• 如果未设置内容属性，则伪元素将无效且不显示
• 伪元素在第一次设置时本质上是空的，因此必须设置宽度和高度。因为.my container具有position:relative设置100%使放置在文本之前的伪元素与container元素的大小相同

您可以这样做：

.my container{
位置：相对位置；
背景#5C97FF；
溢出：隐藏；
背景图像：url（'http://placekitten.com/1500/1000');
背景重复：无重复；
背景位置：50%0；
-ms背景尺寸：封面；
-o-背景尺寸：封面；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
潜水面罩{
背景色：#5C97FF64；
宽度：100%；
身高：100%；
填充：20px0；
}
h1{margin:0；}

苏格兰威士忌

您可以执行以下操作：

.my container{
位置：相对位置；
背景#5C97FF；
溢出：隐藏；
背景图像：url（'http://placekitten.com/1500/1000');
背景重复：无重复；
背景位置：50%0；
-ms背景尺寸：封面；
-o-背景尺寸：封面；
-moz背景尺寸：封面；
-webkit背景尺寸：封面；
背景尺寸：封面；
}
潜水面罩{
背景色：#5C97FF64；
宽度：100%；
身高：100%；
填充：20px0；
}
h1{margin:0；}

苏格兰威士忌

为什么使用

：在

之前，为什么不将样式设置为

。我的容器

本身？因为这也会影响h1的不透明度，我不想这样做。为什么使用

：在

之前，为什么不将样式设置为

。我的容器

本身？因为这也会影响我不想要的h1的不透明度做

<div class="my-container">
    <h1>Scotch Scotch Scotch</h1>
</div>

.my-container {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.my-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('http://placekitten.com/1500/1000');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}