如何在CSS中混合元素？-css教學-PHP中文網

簡介

了解混合混合模式

範例

Blended Element

Background Element

說明

提示與注意事項

結論

首頁

web前端

css教學

如何在CSS中混合元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 14, 2023 pm 12:13 PM

如何在CSS中混合元素？

簡介

CSS 中的混合元素是一種用於創建有趣的視覺效果並增強網頁設計的技術。使用 CSS 中的 mix-blend-mode 屬性，您可以控制元素與其下面的內容混合的方式。在本文中，我們將探討如何使用 mix-blend 模式來混合 CSS 中的元素。

了解混合混合模式

mix-blend-mode 是一個 CSS 屬性，可讓您設定元素的混合模式。混合模式決定兩個元素如何混合在一起，不同的模式會產生不同的視覺效果。

預設情況下，CSS 中的元素的混合模式為正常，這表示它將正常顯示在其他內容之上。但使用混合混合模式，您可以為元素設定不同的混合模式，它會以特定的方式與其下方的內容混合。

有多種混合模式可供選擇，每種模式都會產生獨特的效果。以下是一些最常用的混合模式的概述 -

正常- 預設混合模式，通常會將元素顯示在其他內容之上
#相乘- 使元素下方的內容變暗
畫面- 讓元素下方的內容變亮
疊加- 產生乘法和螢幕效果的組合
顏色減淡 - 讓元素下方的內容變亮
#顏色加深 - 讓元素下方的內容變暗
強光 - 根據底層內容的亮度產生乘法和螢幕效果的組合
柔光- 產生與在元素下方的內容上照射漫射光類似的效果
差異- 產生突出顯示元素與其下方內容之間差異的效果
#排除- 產生與差異類似的效果，但對比度較小
#應用混合混合模式

#要將 mix-blend-mode 套用到 CSS 中的元素，您只需將該屬性設定為所需的混合模式即可。這是一個例子 -

.blended-element {
   mix-blend-mode: multiply;
}

登入後複製

此程式碼將 .blished-element 類別的混合模式設定為相乘。這意味著該元素下方的任何內容都會變暗。

您也可以使用background-blend-mode 屬性將mix-blend-mode 套用到元素的背景。這使您可以使用頁面上的背景圖像和其他元素來創建有趣的效果。

.background-element {
   background-image: url('background-image.jpg');
   background-blend-mode: screen;
}

登入後複製

程式碼將.background-element類別的背景圖像設定為background-image.jpg，並將background-blend-mode設定為螢幕。這意味著背景影像將變亮，產生增亮效果。

範例

<!DOCTYPE html>
<html>
<head>
   <title>Blending Elements in CSS</title>
   <style>
      .blended-element {
         background-color: #ff00ff;
         mix-blend-mode: multiply;
         width: 300px;
         height: 200px;
      }
      .background-element {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-blend-mode: screen;
         width: 100%;
         height: 500px;
      }
   </style>
</head>
<body>
   <div class="blended-element">
      <h1 id="Blended-Element">Blended Element</h1>
      <p>This element is using mix-blend-mode to darken the content beneath it.</p>
   </div>
   <div class="background-element">
      <h1 id="Background-Element">Background Element</h1>
      <p>This element is using background-blend-mode to lighten the background image.</p>
   </div>
</body>
</html>

登入後複製

說明

在此範例中，我們建立了兩個 div 元素。第一個 div 具有混合元素類，並使用 mix-blend-mode：multiply;使其下方的內容變暗。第二個div有一個background-element類別並且使用background-blend-mode: screen;使背景圖像變亮。
我們也使用 CSS 為元素添加了一些基本樣式。 .blend-element 具有粉紅色背景色，而 .background-element 具有背景圖像，並設定為覆蓋頁面的整個寬度和高度。

我們強烈建議讀者嘗試提到的所有混合模式，以便更好地理解該主題。