css 背景图片的透明度设置

如何让背景图片呈现一定透明度，以便其下的文字内容清晰可见？

通常的做法是使用 background-color 属性设置 rgba 值，比如 background-color: rgba(255, 255, 255, 0.5);，其中最后的数字表示透明度，0 表示完全透明，1 表示完全不透明。然而，这种方法并不适用于设置背景图片的透明度。

伪元素解决方案

解决这个问题的一种方法是使用伪元素：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

1. 创建一个包含背景图片的父元素并设置 position: relative;。

2. 添加一个伪元素（如 :before)，设置如下属性：

   • position: absolute;: 确保其绝对定位在父元素内。
   • content: "";: 占位符，将其视为一个没有内容的透明层。
   • opacity: .6;: 设置透明度为 60%。
   • background-image: url('xxxx');: 设置背景图片。
   • top: 0; left: 0; right: 0; bottom: 0;: 覆盖整个父元素区域。

通过这种方式，伪元素可以覆盖背景图片，并通过调整其透明度来实现背景图片的透明度设置。