Css DIV中的背景图像透明度

我正在尝试使背景图像透明（没有使透明PNG或更亮图像的选项，图像经常更改）

---

获取图像正在工作，但DIV内的所有内容也都是透明的。我一直在寻找解决方案，但似乎无法实现正确的解决方案。任何关于如何修复的指针？

在包装器元素内部的背景div上使用不透明

.page{
位置：相对位置；
宽度：100px；
高度：100px；
}
.页：：之前{
内容：''；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：url（'http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');
不透明度：0.2；
z指数：-1；
}
.盒子{
显示：内联；
背景：红色；
}

我的页面
红盒子

您可以将CSS与一起使用

div{
宽度：300px；
高度：200px；
背景：线性梯度（rgba（255255.5），rgba（255255.5）），url（“https://i.imgur.com/xnh5x47.jpg");
}
跨度{
背景：黑色；
颜色：白色；
}

---

你好世界。

您可以使用伪元素

div{
宽度：300px；
高度：200px；
颜色：绿色；
位置：相对位置；
}
部门：以前{
背景：url(https://i.imgur.com/xnh5x47.jpg);
内容：“；
z指数：-1；
位置：绝对位置；
不透明度：0.5；
顶部：0；底部：0；左侧：0；右侧：0；
背景尺寸：封面；
}

---

LOLOLOL

为

容器设置：背景色：rgba（0,0,0,0.5）

和clear opacityDoesn这不就是让图像上方的白色变得透明吗？这会增加或减少浏览器渲染的压力吗？@JanTeunis我不认为有什么值得注意的，因为这是非常标准的CSS3内容，如果你愿意，你可以做一些测试。了解更多关于它的信息。@Ced这是正确的，但它实际上是白色的，具有一定的透明度，这正是问题所要求的，当然，您可以根据需要将其更改为深色。谁知道OP的图像背后有什么，它可能不是纯空白的（可能是另一幅图像）。无论如何，我同意，这是有用的，而且很有启发性。UpvotedHad必须使用

z-index:-0使其工作。。。但它成功了！谢谢。必须使用
z-index:-0使其工作。。。但它成功了！谢谢
background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;