CSS mix-blend-mode 屬性

定義和用法

mix-blend-mode 屬性規定元素的內容應如何與其直接父背景混合。

另請參閱：

CSS 參考手冊：CSS background-blend-mode 屬性

實例

擁有紅色背景的容器，以及與這個紅色容器融合的圖像（暗）：

.container {
  background-color: red;
}
.container img {
  mix-blend-mode: darken;
}

親自試一試

可以在頁面下方找到更多 TIY 實例。

CSS 語法

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;

屬性值

值 描述
normal 這是默認值。將混合模式設置為普通。
multiply 將混合模式設置為 multiply。
screen 將混合模式設置為 screen。
overlay 將混合模式設置為 overlay。
darken 將混合模式設置為 darken。
lighten 將混合模式設置為 lighten。
color-dodge 將混合模式設置為 color-dodge。
color-burn 將混合模式設置為 color-burn。
difference 將混合模式設置為 difference。
exclusion 將混合模式設置為 exclusion。
hue 將混合模式設置為 hue。
saturation 將混合模式設置為 saturation。
color 將混合模式設置為 color。
luminosity 將混合模式設置為 luminosity。

技術細節

默認值： normal
繼承： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
JavaScript 語法： object.style.mixBlendMode = "darken"

更多實例

實例

演示所有值：

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

親自試一試

實例

使用 mix-blend-mode 來創建響應式 cutout/knockout 文本（摳圖文本）：

.image-container {
  background-image: url("paris.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
}
.text {
  background-color: white;
  color: black;
  font-size: 10vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}

親自試一試

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

Chrome IE / Edge Firefox Safari Opera
41.0 79.0 32.0 8.0 35.0