如何使用 CSS 调整背景图像的不透明度？

使用 CSS 生成的内容调整背景图像不透明度

CSS background-image-opacity 属性，顾名思义，允许您修改背景图像的透明度。但是，需要注意的是，CSS 中不存在这样的属性。

使用 CSS 生成的内容和类

另一种方法涉及使用 CSS 生成的内容来创建褪色背景：

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

.container:before {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  content: url('path/to/image.ext');
  opacity: 0.4;
}

.container:hover:before {
  opacity: 1;
}

虽然此技术允许您显示褪色背景图像，它不允许动态调整其不透明度。

使用 CSS 过渡

要对背景图像的不透明度进行动画处理，您可以使用 CSS 过渡：

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

添加到 .container:before 规则将导致不透明度在一秒内过渡到 1。

浏览器兼容性

• Firefox 5 及更高版本（也可能包括 FireFox 4）
• IE 9（失败 )
• 基于Webkit的浏览器（Chrome 26及以上）

值得注意的是，目前只有最新版本的Firefox支持这种方式。

以上是如何使用 CSS 调整背景图像的不透明度？的详细内容。更多信息请关注PHP中文网其他相关文章！