背景图像：网址不透明度 - CSS

简介

在 CSS 中，可以为元素设置背景图像。但是，有时候我们需要让背景图像的透明度比元素本身的透明度更低，这时候我们可以使用 background-image 属性与 opacity 属性一起使用。

语法

background-image 属性用于设置背景图像的 URL，opacity 属性用于设置元素本身的透明度。两个属性一起使用时，可以用下面的语法：

background-image: url("image.jpg");
opacity: 0.5;

示例

下面的代码演示了如何将一个带有背景图像的元素的透明度设置为 0.5：

<div class="box"></div>

.box {
  width: 300px;
  height: 200px;
  background-image: url("https://picsum.photos/300/200");
  opacity: 0.5;
}

效果如下：

注意事项

• 背景图像的 URL 可以是相对路径也可以是绝对路径。
• 使用 background-image 属性设置背景图像时，如果图片无法加载，会默认显示背景颜色，可以使用 background-color 属性设置默认背景颜色。
• 如果只需要设置背景图像本身的透明度，可以使用 background-image 属性与 rgba() 颜色值一起使用，具体做法可以参考本网站的其他教程。