在 CSS 中使背景影象變暗

1. 在 CSS 中使用線性漸變使背景影象變暗
2. 在 CSS 中使用 background-blend-mode 屬性使背景影象變暗

在本文中，我們將介紹幾種在 CSS 中使背景影象變暗的方法。

在 CSS 中使用線性漸變使背景影象變暗

我們可以使用 CSS Linear Gradient 在 CSS 中使背景影象變暗。linear-gradient() 函式建立具有線性漸變的背景。線性漸變是至少兩種不同顏色之間的平滑過渡。該函式採用無數的顏色引數。我們可以將梯度的方向設定為第一個引數。方向的選項是 to right、to left、to bottom right、90deg 等。我們可以將線性漸變應用於背景影象並設定較暗的顏色和不透明度以使背景影象變暗。我們可以使用 linear-gradient() 函式中的 rgba() 函式來設定顏色。在這裡，我們只會使背景影象變暗，而不會使其他元素變暗。

例如，在 CSS 中選擇容器並使用 background 速記屬性來設定線性漸變和背景影象。編寫 linear-gradient() 函式並將兩個色標設為 rgba(0, 0, 0, 0.7)。接下來，使用 url() 函式設定你選擇的背景影象。使用各種背景屬性將影象正確放置在背景中。將 background-position 設定為 center，將 background-repeat 設定為 no-repeat，將 background-size 設定為 cover。將高度設定為 100%。確保選擇 body 和 html 標籤並將高度設定為 100%，邊距設定為 0。

在下面的示例中，我們使用 rgba(0, 0, 0, 0.7) 作為兩個色標。函式 rgba(0, 0, 0) 等於黑色。第四個值是不透明度的值。接近 1 的值使其更暗，反之亦然。我們可以根據需要調整不透明度值，使背景影象變暗。這樣，我們就可以在 CSS 中使用線性漸變來使背景影象變暗。

示例程式碼：

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

在 CSS 中使用 background-blend-mode 屬性使背景影象變暗

我們可以使用 background-blend-mode 屬性來使 CSS 中的背景影象變暗。該屬性設定背景的混合模式。此屬性有多種選擇。一些選項是 normal、multiply、darken、lighten, saturation 等。我們可以使用變暗選項使背景影象更暗。我們可以使用 rgba() 函式設定背景影象的顏色。

例如，在 CSS 中選擇 background id 並使用 background 屬性設定顏色和背景影象。將顏色設定為 rgba(0, 0, 0, 0.7) 並在 url() 函式中使用佔位符影象。使用與第一種方法不同的背景屬性來正確設定影象。接下來，使用 background-blend-mode 屬性並將其設定為 darken。

通過這種方式，我們可以使用 background-blend-mode 屬性使背景影象變暗。

示例程式碼：

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>