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

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 和不透明度。 第四个参数是介于 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;
}

代码笔

Answer 2

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

另一方面， opacity用于指定元素的不透明度/透明度，包括元素的背景。

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

尝试给 `background-color: rgba(77, 82, 86, 0 - 1);