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

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;
}

密码笔

Answer 2

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

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

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

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