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

【问题标题】：How to reduce the opacity of a background-blend-mode如何降低背景混合模式的不透明度
【发布时间】：2021-03-05 07:46:39
【问题描述】：

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

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

【问题讨论】：

背景色：rgb(77, 82, 86, 0.6);

标签： html css background-blend-mode

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

尝试使用 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

【讨论】：