如何用css3混淆背景？

我需要给背景图像加阴影

background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("background.png");

这段代码工作正常，但有更简单的方法吗？

为什么要使用渐变？ 只需设置如下背景：

background: url("background.png"), rgba(0, 0, 0, 0.5);

根据需要，您可以使用框阴影

box-shadow: inset 0 0 100px black;

---

唯一的问题是阴影也会从侧面出现。

您可以添加一个覆盖整个图像的半透明伪元素：

.element {
    position: relative;
}

.element:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0,0,0,0.5);
    pointer-events: none; /* if the element below needs to be clickable */
}

---

这只是实现它的方法之一。它的渲染速度比渐变快，但我不确定它是否简单；）

不要使用背景图像制作阴影。它会逐渐增加你的站点加载时间

将此css添加到元素的最佳方法：

-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);

---

我推荐这个网站来生成阴影：

一个更简单的方法是什么？您还没有解释要实现的目标。您可以将

线性渐变（…）

替换为

rgba（0,0,0,0.5）

，因为渐变的开始和结束颜色相同。@SalmanA，这就是我开始本主题的原因！无效且无效。@SalmanA规范是：所有背景图像的图像，最后一个除外，在第一个示例中，如果图像不透明，则颜色不可见。不应使用CSS使背景图像透明。使用图像编辑器使其透明。如果你想要一个完整的CSS解决方案，唯一的方法就是使用Dudak先生答案中的伪元素。在第一个示例中，rgba（0,0,0,0.5）位于图像下方，而不是图像上方。是@FC unfixed支持：89.86%的浏览器。但说到跨浏览器的可比性，您必须为剩余的“0.76%”使用前缀。这不是一条错误的道路。