将背景图像着色得更暗

Question

我已经为一个元素设置了背景图像，但想对其进行着色以使其更暗。

我正在尝试使用多张背景图片：

.c-to-c {
    background: url('https://picsum.photos/535/250') no-repeat, rgba(0, 0, 0, .75);
    background-size: cover;
}

然而黑色并没有出现，显示时好像只有背景图像。

Answer 1

考虑使用：

background-blend-mode: darken;

查找 'background-blend-mode' 以获取其广泛的属性值列表

Answer 2

您可以使用 CSS 滤镜属性应用色调。

.c-to-c {
    background: url('https://picsum.photos/535/250') no-repeat;
    background-size: cover;
    filter: brightness(50%);
}

Answer 3

如果我对你的问题的理解正确，那么这里有一个使用 linear-gradient 规则的例子。

.c-to-c {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/535/250') no-repeat;
    background-size: cover;
}

Answer 4

.c-to-c {
background-image: linear-gradient(
rgba(0, 0, 0, 0.5), 
rgba(0, 0, 0, 0.5)), 
url('/image');
background-position: center;
background-repeat: no-repeat;
background-size: cover;

}

此语法似乎适用于您描述的 objective。

将背景图像着色得更暗

Tinting background image darker

html

css

background-image