图像上的 CSS 颜色背景

Question

编辑:我忘了提及非常重要的事情，我不能编辑基本的 html，只能编辑 css。这是一个 reddit 样式表。

我想在图像背景上有一个半透明的彩色背景作为色调。这是我尝试过的:这只显示图像:

background: url(image) no-repeat, rgba(0,0,0,0.5);

这显示了图像并打破了它的缩放比例(背景大小:100%；):

background: rgba(0,0,0,0.5), url(image) no-repeat;

这使得背景完全变黑，透明度逐渐淡化到它后面的任何东西而不是图像:

background-image: url(image) no-repeat;
background: rgba(0,0,0,0.5);

这再次只显示图像，并打破了缩放比例:

background-image: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

这只显示图像而不破坏缩放比例:

background: url(image) no-repeat;
background-color: rgba(0,0,0,0.5);

我也试过使用@Trevan 的答案，但没有成功:

#header:lang(dd) {
    position: relative;
    background: url(%%HexBackground%%) no-repeat;
}

#header:lang(dd)::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
}

虽然我可能做错了。

Answer 1

仅限 CSS:box-shadow

请在此处查看基本示例 http://jsfiddle.net/vyo168gg/1/

div {
    width: 500px;
    height: 300px;
    background: url(image) no-repeat;
    box-shadow: 0px 5000px 0px rgba(256, 0, 0, 0.5) inset;
}

基本上，我们不会在元素外部显示框阴影，而是将其放在内部。

诀窍是让第一个或第二个参数(?) 大于元素的宽度/高度，以便它与整个图像重叠。