CSS mix-blend-mode รายการ

การเขียนและการใช้งาน

mix-blend-mode คุณสมบัติกำหนดว่าหลักส่วนที่อยู่ภายในตัวแทนควรผสมกับพื้นหลังของพ่อของตัวแทนอย่างไร。

ดูเพิ่มเติมที่:

คู่มือ CSS:คุณสมบัติ background-blend-mode CSS

实例

มีตัวแทนที่มีพื้นหลังสีแดง และภาพที่ผสมที่มีพื้นหลังสีแดงนี้ (มืด):

.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 ตั้งรูปแบบการผสมที่เรียก
screen ตั้งรูปแบบการผสมที่แสง
overlay ตั้งรูปแบบการผสมที่ทับ
darken ตั้งรูปแบบการผสมที่มืดขึ้น
lighten ตั้งรูปแบบการผสมที่สว่างขึ้น
color-dodge ตั้งรูปแบบการผสมที่หลุดสี
color-burn ตั้งรูปแบบการผสมที่เผาสี
difference ตั้งรูปแบบการผสมที่ต่างกัน
exclusion ตั้งรูปแบบการผสมที่ยกเลิก
hue ตั้งรูปแบบการผสมที่สีสัน
saturation ตั้งรูปแบบการผสมที่ความชัดเจน
color ตั้งรูปแบบการผสมที่สี
luminosity ตั้งรูปแบบการผสมที่ชาญชาติภาพ

รายละเอียดเทคนิค

ค่าเริ่มต้น: normal
รับทุกทาง: ไม่
การสร้างอนุการ์: ไม่สนับสนุน。ดูเพิ่มเติมที่:คุณสมบัติที่เกี่ยวกับอนุการ์.
ความเข้าใจทางภาษาเจาะบลีสต์: 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