ตัวอย่าง
ระบุโหมดผสม:
div {
width:
200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image:
linear-gradient(to right, black 0%, white 100%), url('w3css.gif');
background-blend-mode: color-dodge;
} ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติพื้นหลังผสมผสานโหมดกำหนดโหมดผสมของแต่ละชั้นพื้นหลัง (color and/or image)
| ค่าเริ่มต้น: | normal |
|---|---|
| รับการถ่ายทอด: | no |
| Animatable: | no. Read about animatable |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.backgroundBlendMode="screen" |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| background-blend-mode | 35.0 | ได้รับการสนับสนุน | 30.0 | 7.1 | 22.0 |
CSS ไวยากรณ์
background-blend-mode:
normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| normal | นี้จะเริ่มต้น ตั้งค่าโหมดผสมให้เป็นปกติ | เล่น " |
| multiply | ตั้งค่าโหมดผสมคูณ | เล่น " |
| screen | ตั้งค่าโหมดผสมไปที่หน้าจอ | เล่น " |
| overlay | ตั้งค่าโหมดผสมซ้อน | เล่น " |
| darken | ตั้งค่าโหมดผสมมืด | เล่น " |
| lighten | ตั้งค่าโหมดการผสมเพื่อแบ่งเบา | เล่น " |
| color-dodge | ตั้งค่าโหมดการผสมสี-หลบ | เล่น " |
| saturation | ตั้งค่าโหมดผสมอิ่มตัว | เล่น " |
| color | ตั้งค่าโหมดการผสมสี | เล่น " |
| luminosity | ตั้งค่าโหมดการผสมเพื่อการส่องสว่าง | เล่น " |
หน้าเว็บที่เกี่ยวข้อง
CSS Tutorial: CSS พื้นหลัง