Chế độ hòa trộn - Thủ thuật CSS

Các mix-blend-modetài sản định nghĩa như thế nào nội dung của một nguyên tố nên pha trộn với nền của nó. Ví dụ, văn bản của một

có thể hòa trộn với nền đằng sau nó theo những cách thú vị.

.blend ( mix-blend-mode: exclusion; )

Trong ví dụ trên, nội dung đã được sửa đổi mix-blend-modeđể màu sắc của văn bản bị loại trừ khỏi nền của nó. Đây chỉ là một trong nhiều giá trị của tài sản này.

Đã xảy ra sự cố với Chrome 58+ nơi mix-blend-modesẽ không hiển thị trên các phần tử được đặt trên nền trong suốt . Đã được đánh dấu là Số phát hành 711955 trong Chrome, được ấn định tại thời điểm viết bài này. Trong khi đó, một cách khắc phục đơn giản là chỉ định màu nền trắng (hoặc thực sự là bất kỳ) cho phần tử body.

Giá trị

• initial: cài đặt mặc định của thuộc tính không đặt chế độ hòa trộn.
• inherit: một phần tử sẽ kế thừa chế độ hòa trộn từ phần tử mẹ của nó.
• unset: loại bỏ chế độ hòa trộn hiện tại khỏi một phần tử.
• : đây là thuộc tính của một trong các chế độ hòa trộn bên dưới:
• normal: thuộc tính này không áp dụng bất kỳ sự pha trộn nào.
• multiply: phần tử được nhân với nền và thay thế màu nền. Màu kết quả luôn tối như nền.
• screen: nhân nền và nội dung sau đó bổ sung cho kết quả. Điều này sẽ dẫn đến nội dung sáng hơn background-color.
• overlay: nhân hoặc sàng lọc nội dung tùy thuộc vào màu nền. Đây là nghịch đảo của chế độ hòa trộn ánh sáng cứng.
• darken: nền được thay thế bằng nội dung mà nội dung tối hơn, nếu không, nó được giữ nguyên như cũ.
• lighten: nền được thay thế bằng nội dung mà nội dung nhẹ hơn.
• color-dodge: thuộc tính này làm sáng màu nền để phản ánh màu của nội dung.
• color-burn: điều này làm tối nền để phản ánh màu sắc tự nhiên của nội dung.
• hard-light: tùy thuộc vào màu của nội dung mà thuộc tính này sẽ hiển thị hoặc nhân lên.
• soft-light: tùy thuộc vào màu sắc của nội dung mà nó sẽ làm tối hoặc sáng.
• difference: giá trị này trừ màu tối hơn của hai màu khỏi màu sáng nhất.
• exclusion: tương tự differencenhưng có độ tương phản thấp hơn.
• hue: tạo màu với màu của nội dung kết hợp với độ bão hòa và độ sáng của nền.
• saturation: tạo màu với độ bão hòa của nội dung kết hợp với màu sắc và độ sáng của nền.
• color: tạo màu với màu sắc và độ bão hòa của nội dung và độ sáng của nền.
• luminosity: tạo ra một màu với độ sáng của nội dung và màu sắc và độ bão hòa của nền. Đây là nghịch đảo của colorthuộc tính.

Cần lưu ý rằng việc thiết lập một chế độ hòa trộn khác normalsẽ tạo ra một ngữ cảnh xếp chồng mới mà sau đó phải được trộn với ngữ cảnh xếp chồng có chứa phần tử.

Ảnh hưởng của các giá trị này được hiển thị trong bản trình diễn bên dưới:

Thêm thông tin

• Khái niệm cơ bản về các chế độ CSS Blend
• mix-Blend-mode trên MDN
• mix-Blend-mode trên W3C
• Bộ sưu tập các bản trình diễn Chế độ hòa trộn CSS
• Tìm hiểu các chế độ pha trộn CSS

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome	Firefox	I E	Cạnh	Safari
41	32	Không	79	TP.

Di động / Máy tính bảng

Chrome dành cho Android	Android Firefox	Android	iOS Safari
88	85	81	14.0-14.4