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

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