css3实现背景图片半透明内容不透明的方法示例

下面是关于"CSS3实现背景图片半透明内容不透明的方法示例"的攻略：

1. 使用rgba颜色实现背景半透明

可以使用CSS3中的rgba()函数来实现背景色半透明的效果。rgba()函数中的前三个参数表示红、绿、蓝三个颜色通道的数值，最后一个参数表示透明度，数值范围为0到1。

示例代码：

background-color: rgba(255,255,255,0.5);

上面的代码表示使用白色作为背景色，透明度为0.5。这样可以使背景色半透明，而内容不透明。

2. 使用伪元素实现半透明遮罩

可以使用CSS3中的伪元素（::after或::before）来实现半透明遮罩的效果。通过在元素中插入一个伪元素，并设置其宽度、高度等属性以使其覆盖整个元素，然后设置其背景色和透明度来实现遮罩效果。

示例代码：

div {
  position: relative;
  width: 300px;
  height: 200px;
  background-image: url("background.jpg");
  background-size: cover;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

上面的代码表示在一个div元素中插入一个伪元素，并设置其背景色为半透明黑色（rgba(0, 0, 0, 0.5)）。由于伪元素是绝对定位的，且设置了宽度和高度为100%，因此可以覆盖整个div元素，达到遮罩的效果。

以上就是实现"CSS3实现背景图片半透明内容不透明的方法示例"的两种方法，你可以根据自己的需求进行选择。