CSS คุณสมบัติพื้นหลังผสมผสานโหมด
ตัวอย่าง
โหมดผสม:
div {
ความกว้าง: 290px;
ความสูง: 69px;
พื้นหลัง-size: 69px 290px;
พื้นหลังซ้ำ: ไม่มีซ้ำ;
ภาพพื้นหลัง: เส้นลาด ( ไปทางขวา, สีเขียว 0% สีขาว 100%) URL ( 'logo.png');
พื้นหลังผสมผสานโหมด: color- หลบ;
}
ความกว้าง: 290px;
ความสูง: 69px;
พื้นหลัง-size: 69px 290px;
พื้นหลังซ้ำ: ไม่มีซ้ำ;
ภาพพื้นหลัง: เส้นลาด ( ไปทางขวา, สีเขียว 0% สีขาว 100%) URL ( 'logo.png');
พื้นหลังผสมผสานโหมด: color- หลบ;
}
ลอง»
ความหมายและการใช้งาน
แอตทริบิวต์พื้นหลังผสมผสานโหมดกำหนดโหมดการผสมผสานของชั้นพื้นหลัง (สีของภาพ)
เริ่มต้น: | ปกติ |
---|---|
ที่รับมา: | ไม่ |
Animatable: | ไม่มี. ดู animatable |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.backgroundBlendMode = "หน้าจอ" |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน
คุณสมบัติ | |||||
---|---|---|---|---|---|
พื้นหลังผสมผสานโหมด | 35.0 | ไม่สนับสนุน | 30.0 | 7.1 | 22.0 |
CSS ไวยากรณ์
background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;
มูลค่าทรัพย์สิน
ความคุ้มค่า | ลักษณะ | ตัวอย่าง |
---|---|---|
ปกติ | ผิดนัด การตั้งค่าโหมดผสมผสานปกติ | ลอง» |
คูณ | โหมดคูณ | ลอง» |
จอภาพ | โหมดสี | ลอง» |
วางซ้อน | โหมดการแสดงข้อมูลบน | ลอง» |
มืดมิด | โหมดหรี่ | ลอง» |
เบา | โหมดการปรับความสว่าง | ลอง» |
สีหลบ | โหมดสีดอดจ์ | ลอง» |
ความอิ่มตัว | โหมดอิ่มตัว | ลอง» |
สี | โหมดสี | ลอง» |
ความสว่างไสว | โหมดความสว่าง | ลอง» |
บทความที่เกี่ยวข้อง
CSS Tutorial: พื้นหลัง CSS