如何降低背景混合模式的不透明度

Question

我正在寻找一种方法来降低背景混合模式的不透明度。我代码中的不透明度会影响颜色和图像。我希望它只影响混合模式。我想达到

这样的效果

.example {
    background-image: url(../assets/image.jpg);
    background-size: cover;
    background-color: rgb(77, 82, 86);
    background-blend-mode: multiply;
    opacity: 0.6;
}

Answer 1

尝试使用 rgba 函数代替 rgb 和不透明度。第 4 个参数是介于 0 和 1 之间的不透明度。根据您的屏幕截图，我假设您需要 0.9

.example {
    background-image: url(../assets/image.jpg);
    background-size: cover;
    background-color: rgba(77, 82, 86, 0.9);
    background-blend-mode: multiply;
}

Codepen

Answer 2

background-blend-mode 用于将多个 背景图像 混合在一起或将其与背景颜色混合。

另一方面opacity用于指定元素的opacity/transparency，包括元素的背景。

如果您只想使任何颜色变亮，即背景颜色、边框颜色、字体颜色，您可以使用 RGBA 或 #AARRGGBB，其中 A 代表alpha（透明度）。

尝试设置背景色：rgba(77, 82, 86, 0 - 1);

如何降低背景混合模式的不透明度

How to reduce the opacity of a background-blend-mode

html

css

background-blend-mode