ตัวแปร background-blend-mode CSS

การกำหนดและการใช้งาน

background-blend-mode คำนิยามรายละเอียด กำหนดรูปแบบผสมของชั้นหลังทุกชั้น (สีและ/หรือ ภาพ)

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

การเรียนรู้ CSSCSS พื้นหลัง

ตัวอย่าง

กำหนดรูปแบบผสมของภาพ 배경เป็น "lighten" (เพิ่มสว่างขึ้น)

div { 
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: lighten;
}

ลองทดลองด้วยตัวเอง

คุณสามารถเห็นตัวอย่าง TIY มากกว่าที่ด้านข้างล่าง

ระบบการเขียน CSS

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

ค่าของรายละเอียด

ค่า คำอธิบาย
normal โดยเริ่มต้น จัดรูปแบบผสมเป็นปกติ
multiply จัดรูปแบบผสมเป็น multiply (คูณ)
screen จัดรูปแบบผสมเป็น screen (หน้าจอ)
overlay จัดรูปแบบผสมเป็น overlay (บน)
darken จัดรูปแบบผสมเป็น overlay (บน)
lighten จัดรูปแบบผสมเป็น lighten (เพิ่มสว่างขึ้น)
color-dodge ตั้งโหมดผสมภาพเป็น color-dodge (การลดสี)
saturation ตั้งโหมดผสมภาพเป็น saturation (ความสมดุล)
color ตั้งโหมดผสมภาพเป็น color (สี)
luminosity ตั้งโหมดผสมภาพเป็น luminosity (ความรุ่งเรือง)

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

ค่าเริ่มต้น: normal
การสืบทอด: ไม่
การสร้างอนิมาษัย: ไม่สนับสนุน。โปรดดู:คุณสมบัติที่เกี่ยวข้องกับอนิมาษัย。
เวอร์ชัน: CSS3
การใช้งาน JavaScript: object.style.backgroundBlendMode="screen"

ตัวอย่างเพิ่มเติม

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "multiply"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: multiply;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "screen"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: screen;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "overlay"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: overlay;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "darken"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: darken;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "color-dodge"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color-dodge;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "saturation"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: saturation;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "color"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: color;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "luminosity"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: luminosity;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง

กำหนดโหมดผสมภาพเป็น "normal"：

div { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("paper.gif");
  background-blend-mode: normal;
}

ลองทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมนี้

ตารางตัวเลขบอกเล่าถึงเวอร์ชันบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด。

Chrome Edge Firefox Safari Safari
Chrome Edge Firefox Safari Safari
Opera 35.0 79.0 30.0 7.1