如何使用CSS降低元素背景的不透明度

技术背景

在网页设计中，有时需要降低元素背景的不透明度，同时保持元素内的文本或其他内容不受影响。这样可以营造出更加美观和有层次感的页面效果。但不同浏览器对实现背景不透明度的支持存在差异，需要考虑多种解决方案。

实现步骤

1. 使用RGBA颜色值

RGBA是一种表示颜色的方式，其中前三个值代表红、绿、蓝，最后一个值代表透明度（取值范围从0到1）。

1	`background-color: rgba(255, 0, 0, 0.5);`

示例代码：

1
2
3

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

2. 处理旧版IE浏览器

对于Internet Explorer 5.5 - 8，需要使用滤镜来实现类似效果。

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

3. 使用半透明PNG或SVG图像

可以创建一个半透明的PNG或SVG图像，然后将其作为元素的背景。

1	`<p style="background: url(green.png);">any text</p>`

4. 使用伪元素

使用伪元素作为背景，设置其不透明度，而不影响主元素及其子元素。

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}

示例代码：

1
2
3

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

5. 使用jQuery插件

可以使用像Transify这样的jQuery插件来处理背景不透明度，并且还能处理动画效果。

核心代码

使用RGBA

1	`background-color: rgba(255, 0, 0, 0.5);`

处理旧版IE

.alpha60 {
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0.6);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

使用伪元素

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}