css怎么实现背景图片透明文字不透明

css
1281
2023/7/10 20:42:45
栏目: 编程语言
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

要实现背景图片透明,文字不透明的效果,可以使用CSS的伪元素和定位技巧来实现。

首先,将要显示的文字包裹在一个容器元素内。例如,使用一个 div 元素作为容器:

<div class="container">
<h1>Hello, World!</h1>
</div>

然后,使用CSS设置容器元素的 position 属性为 relative,并设置 z-index 为较大的值,使其位于背景图片之上:

.container {
position: relative;
z-index: 2;
}

接下来,使用伪元素 ::before::after 来创建一个与容器大小相同的伪元素,并设置其背景图片和透明度。注意要将伪元素的 position 属性设置为 absolute,并设置其 toprightbottomleft 属性为 0,以使其覆盖整个容器:

.container::before {
content: "";
background-image: url("背景图片的URL");
opacity: 0.5; /* 设置背景图片透明度 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}

最后,通过设置容器内文字的透明度来控制文字的不透明度。可以使用 rgba() 函数来设置文字颜色,并通过设置透明度的值来控制不透明度。例如,设置文字颜色为红色,不透明度为 0.8

.container h1 {
color: rgba(255, 0, 0, 0.8); /* 设置文字颜色和不透明度 */
}

这样就可以实现背景图片透明,文字不透明的效果了。

辰迅云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读: CSS list-style属性有什么用