html - 使用伪类来减少背景图像而不是文本的不透明度

Question

因此，以下代码会影响“my-container”的背景图像的不透明度，而不影响“h1”的不透明度，这是期望的结果。

HTML:

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

CSS:

.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;
}

关于这段代码的一些问题:

为什么在 .my-container 类中需要“溢出:隐藏”？

我发现如果我更改或删除“.my-container:before”中的任何属性值对，那么背景图像根本不会显示。具体为什么'content'需要设置为''？ 为什么宽度和高度都必须有一个值？这是否需要以 % 为单位？

谢谢

Answer 1

回答您的问题:

• 不，溢出:此效果不需要隐藏
• 如果没有设置 content 属性，伪元素将无效且不会显示
• 伪元素在首次设置时基本上是空的，因此必须设置宽度和高度。因为 .my-container 有 position: relative 设置 100% 使得放置在文本之前的伪元素与容器元素的大小相同。