介绍
opacity
是一个 CSS 属性,允许你改变元素的不透明度。默认情况下,所有元素的值为 1
。通过将这个值更接近 0
,元素将会变得越来越透明。
一个常见的用例是将图像作为背景的一部分。调整不透明度可以提高文本的可读性或实现所需的外观。然而,目前没有办法只针对元素的 background-image
使用 opacity
而不影响子元素。
在本文中,我们将介绍两种方法来解决具有不透明度的背景图像的限制。
先决条件
如果你想要跟随本文,你需要:
- 熟悉
opacity
。 - 熟悉
position: relative
和position: absolute
。 - 熟悉堆叠上下文和
z-index
。 - 熟悉
:before
和:after
伪元素。
方法一 —— 使用单独的图像元素和定位
第一种方法依赖于两个元素。一个是提供了 position: relative
参考点的 “wrap”。第二个是一个出现在内容后面的 img
元素,使用 position: absolute
和堆叠上下文。
以下是这种方法的标记示例:
<div class="demo-wrap">
<img
class="demo-bg"
src="https://www.qianduange.cn/upload/article/community_bg.png"
alt=""
>
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
以下是相应的样式:
.demo-wrap {
overflow: hidden;
position: relative;
}
.demo-bg {
opacity: 0.6;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.demo-content {
position: relative;
}
这个标记和样式将产生一个文本位于图像上方的结果。
父级 demo-wrap
<div>
建立了一个绝对定位的包含块。demo-bg
<img>
被设置为 position: absolute
,并分配了轻微的 opacity
。demo-content
<div>
被设置为 position: relative
,由于标记的排列方式,它具有比 demo-bg
更高的堆叠上下文。也可以使用 z-index
更精细地控制堆叠上下文。
这种方法有一些局限性。它假设你的图像足够大,以适应任何元素的大小。你可能需要强制施加大小限制,以防止图像出现被截断或不覆盖元素的整个高度。如果你想要控制 “背景位置” 并且没有干净的 “背景重复” 替代方案,它还需要额外的调整。
方法二 —— 使用 CSS 伪元素
第二种方法依赖于伪元素。:before
和 :after
伪元素适用于大多数元素。通常,你会提供一个 content
值,并使用它在开头或结尾附加额外的文本。然而,也可以提供一个空字符串,然后你可以利用伪元素进行设计。
以下是这种方法的标记示例:
<div class="demo-wrap">
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
以下是相应的样式:
.demo-wrap {
position: relative;
}
.demo-wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url('https://www.qianduange.cn/upload/article/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
.demo-content {
position: relative;
}
这个标记和样式将产生一个文本位于图像上方的结果。
父级 demo-wrap
<div>
建立了一个绝对定位的包含块。伪元素 :before
被设置为 position: absolute
,分配了轻微的 opacity
,并使用 background-size: cover
来占据所有可用空间。
这种方法的优点是支持其他 background
属性,如 background-position
、background-repeat
和 background-size
。这种方法的缺点是使用了一个伪元素,可能会与另一个设计效果发生冲突,比如清除浮动解决方案。
结论
在本文中,您了解了两种解决具有不透明度的背景图片的限制的方法。
如果您想了解更多关于 CSS 的知识,请查看我们的 CSS 专题页面,了解相关练习和编程项目。