css - DIV 中的背景图像透明度

Question

这个问题在这里已经有了答案:





Set opacity of background image without affecting child elements

(15 个回答)


4年前关闭。




我正在尝试使背景图像透明(无法选择制作透明的 PNG 或更亮的图像，图像经常更改)。

background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;

图像正在运行，但 DIV 中的所有内容也是透明的。我一直在寻找解决方案，但似乎无法实现正确的解决方案。关于如何解决这个问题的任何指示？

Answer 1

您可以使用 CSS linear-gradient() 与 rgba() .

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

jsFiddle

解释:

第一部分:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5))创建半透明的白色背景色。您可以根据需要在 0 之间更改 alpha 参数(完全透明)和 1 (完全不透明)。

第二部分:url("https://i.imgur.com/xnh5x47.jpg")是显示实际的背景图像。

一起:background: linear-gradient(...), url(...);创建多个背景，其中两个堆叠，第一个覆盖第二个。