在 CSS 中使用顏色疊加影象
-
在 CSS 中使用
rgba()函式用顏色覆蓋背景影象 -
在 CSS 中使用
linear-gradient函式使用漸變疊加背景影象 -
在 CSS 中使用
background-blend-mode屬性使用漸變疊加背景影象
本文將介紹幾種在 CSS 中用顏色疊加影象的方法。
在 CSS 中使用 rgba() 函式用顏色覆蓋背景影象
我們可以使用 rgba() 函式在影象上建立顏色疊加。我們可以將該函式用作 background 屬性的值。
rgba() 函式的語法如下所示。
rgba(red, green, blue, opacity);
此處，紅色、綠色和藍色設定為介於 0-255 和不透明度介於 0-1 之間的值。如果 opacity 的值設定為 0，則它是完全透明的，如果 opacity 的值設定為 1，它將是完全不透明的。
我們可以簡單地通過在影象上方新增顏色來降低其不透明度來建立疊加層。
例如，建立一個 div 標籤並給它一個 id main。然後，在標題中建立一個 div 並給它一個類 overlay。
接下來，建立一個段落 p 並寫一些文字。在 CSS 中，將背景影象設定為 main id，使得 background: url("") no-repeat fixed。
background-repeat 屬性是 no-repeat，background-position 屬性是 fixed。接下來，給 div 賦予 100% 的高度，以根據內容調整其高度。
將溢位屬性設定為 hidden 以隱藏從容器溢位的內容。此外，將顏色設定為白色以使文字更明顯。
最後，將 position 屬性設定為 absolute。
接下來，我們必須通過設定 overplay div 的樣式來建立疊加層。給它一個背景顏色和不透明度，這樣 background: rgba(50, 70, 80, 0.7);。
將 height 屬性設定為 100% 以匹配其父元素的高度。如上所述將 div 的 overflow 屬性設定為 hidden。
下面的示例顯示類名稱為 overlay 的 div 出現在 main div 上。由於 div 具有透明的背景顏色，因此背景影象是可見的。
示例程式碼：
<div id="main">
<div class="overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF;
position: absolute;
}
.overlay {
background: rgba(50, 70, 80, 0.7);
overflow: hidden;
height: 100%;
}
在 CSS 中使用 linear-gradient 函式使用漸變疊加背景影象
線性漸變是一種 CSS 函式，它可以建立沿直線在兩種或多種顏色之間漸進過渡的彩色影象。不同的顏色和不同的方向混合在一起，創造出五顏六色的圖案。
我們可以使用 linear-gradient 作為背景顏色，也可以將其用作影象疊加層。但是，要將其用作影象疊加層，我們必須將其與背景影象一起使用。
不透明度較低的顏色應該是 linear-gradient 以使背景影象可見。
linear-gradient 函式的第一個引數是漸變的方向。之後，我們可以根據需要指定色標。
例如，建立一個 ID 為 main 的 div。在 CS 中選擇 id 並將容器的高度和寬度設定為 100vh 和 100%。
然後使用 background 速記屬性設定線性漸變和背景影象。編寫 linear-gradient 屬性並使用 to right 方向作為第一個引數。
接下來，使用 rgba() 函式來指定漸變。將 rgba(50, 70, 80, 0.7) 作為第一個色標新增 rgba(30, 20, 150, 0.7) 作為第二個色標。
在 linear-gradient 函式之後，使用 url() 插入影象，並使用 no-repeat 和 fixed 選項插入背景影象。
在這裡，我們在 linear-gradient 中使用了兩種顏色，每種顏色的 opacity 為 0.7。linear-gradient 中的 to right 值表示顏色的圖案或方向。
這意味著容器的左側包含顏色 rgba(50, 70, 80, 0.7)，然後在向右移動時顏色逐漸變為 rgba(30, 20, 150, 0.7)。
下面的例子顯示了 linear-gradient 提供了影象疊加，由於 linear-gradient 中使用的顏色的透明度，它包括從左到右移動的兩種不同顏色。
示例程式碼：
<div id="main">
</div>
#main {
height: 100vh;
width: 100%;
background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}
在 CSS 中使用 background-blend-mode 屬性使用漸變疊加背景影象
background-blend-mode 屬性設定元素的背景影象應如何與元素的背景顏色混合。該屬性採用諸如 lighten、darken、multiply、saturation、overlay、soft-light、color-dodge、hard-light 等值。
background-blend-mode 屬性將 background-color 與 background-image 混合。background-blend-mode 屬性的預設值為 normal。
我們可以使用該屬性為背景影象提供覆蓋。我們可以在設定背景影象後使用 background-blend-mode 屬性。
例如，在 HTML 中建立一個 div。在 CSS 中，使用 url() 函式設定背景影象，並在 background 屬性中設定 no-repeat 和 fixed 值。
接下來，將 div 的高度設定為 100vh。為 overflow 屬性應用 hidden 值。
同樣，將 background-color 屬性設定為值 rgba(50, 70, 80, 0.7)。最後，使用 background-blend-mode 並將其值設定為 soft-light 以向背景影象新增疊加效果。
示例程式碼：
<div id="main">
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100vh;
overflow: hidden;
background-color: rgba(50, 70, 80, 0.7);
background-blend-mode: soft-light;
}