คุณสมบัติCSS พื้นหลังผสมโหมด
ตัวอย่าง
ระบุโหมดการผสมของภาพพื้นหลังที่จะ "สว่างขึ้น":
div {
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: lighten;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติbackground-blend-mode
กำหนดโหมดการผสมของเลเยอร์พื้นหลังแต่ละชั้น (สีและ/หรือรูปภาพ)
ค่าเริ่มต้น: | ปกติ |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ไม่. อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS3 |
ไวยากรณ์ JavaScript: | วัตถุ .style.backgroundBlendMode="screen" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
background-blend-mode | 35.0 | 79.0 | 30.0 | 7.1 | 22.0 |
ไวยากรณ์ CSS
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
normal | This is default. Sets the blending mode to normal | |
multiply | Sets the blending mode to multiply | |
screen | Sets the blending mode to screen | |
overlay | Sets the blending mode to overlay | |
darken | Sets the blending mode to darken | |
lighten | Sets the blending mode to lighten | |
color-dodge | Sets the blending mode to color-dodge | |
saturation | Sets the blending mode to saturation | |
color | Sets the blending mode to color | |
luminosity | Sets the blending mode to luminosity |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ระบุโหมดการผสมเป็น "คูณ":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: multiply;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "หน้าจอ":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: screen;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "โอเวอร์เลย์":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: overlay;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "เข้ม":
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;
}
ตัวอย่าง
ระบุโหมดการผสมเป็น "ความอิ่มตัว":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: saturation;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "สี":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: color;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "ความส่องสว่าง":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: luminosity;
}
ตัวอย่าง
ระบุโหมดการผสมให้เป็น "ปกติ":
div {
width: 400px;
height:
400px;
background-repeat: no-repeat, repeat;
background-image: url("img_tree.gif"), url("paper.gif");
background-blend-mode: normal;
}
หน้าที่เกี่ยวข้อง
กวดวิชาCSS: พื้นหลัง CSS