CSS background-blend-mode là gì và sử dụng như thế nào ?

CSS background-blend-mode là một thuộc tính CSS cho phép người dùng thiết lập chế độ pha trộn cho mỗi lớp nền của một phần tử. Nó xác định cách ảnh nền của phần tử pha trộn với màu nền của phần tử. Chúng ta có thể pha trộn các hình ảnh nền với nhau hoặc với màu nền. Tuy nhiên, thuộc tính này không được hỗ trợ trong Edge/Internet Explorer.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS background-blend-mode là gì?

Một phần tử HTML có thể có nhiều lớp nền và thuộc tính CSS background-blend-mode cho phép người dùng thiết lập cách pha trộn cho mỗi lớp nền. Thuộc tính này có thể giúp tăng tính đồ họa của trang web bằng cách phối hợp các hình ảnh với nhau hoặc phối hợp hình ảnh với màu nền để tạo ra hiệu ứng đẹp mắt.

Thuộc tính CSS background-blend-mode phù hợp với những người muốn tạo ra các hiệu ứng đồ họa độc đáo cho trang web của họ. Điều này có thể làm tăng tính tương tác và sự nổi bật của trang web, thu hút người dùng đến với trang web của bạn.

CSS background-blend-mode là gì Là gì?

CSS background-blend-mode là một thuộc tính CSS cho phép người dùng thiết lập chế độ pha trộn cho mỗi lớp nền của một phần tử. Nó xác định cách ảnh nền của phần tử pha trộn với màu nền của phần tử.

Hướng dẫn CSS background-blend-mode

Các giá trị thuộc tính

Thuộc tính CSS background-blend-mode có nhiều giá trị khác nhau để người dùng có thể lựa chọn. Dưới đây là các giá trị thuộc tính cơ bản:

• normal: Đây là giá trị mặc định cho thuộc tính, đặt chế độ pha trộn về chế độ bình thường.
• multiply: Chế độ này nhân màu nền và hình ảnh nền với nhau và dẫn đến kết quả là hình ảnh tối hơn trước đó. Nó được sử dụng để đặt chế độ pha trộn thành chế độ nhân.
• screen: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ màn hình và đảo ngược cả hình ảnh và màu sắc. Hiệu ứng này giống như hiển thị hai hình ảnh trên màn chiếu.
• color-dodge: Chế độ này tương tự như chế độ pha trộn màn hình. Nó được sử dụng để đặt chế độ pha trộn thành chế độ ‘color-dodge’. Kết quả cuối cùng của chế độ này là kết quả của việc chia màu nền cho nghịch đảo của hình ảnh nền.
• difference: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “difference”. Kết quả cuối cùng là kết quả của việc trừ mà – u sáng màu đen từ màu nền lên. Nó được sử dụng để đặt chế độ pha trộn thành chế độ “darken”.
• lighten: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “lighten”. Nó giúp tăng độ sáng của màu nền.
• saturation: Giá trị cuối cùng của chế độ này là độ bão hòa của màu trên cùng, trong khi sử dụng độ sắc và độ sáng của màu đáy.
• luminosity: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “luminosity”. Kết quả cuối cùng là độ sáng của màu trên cùng, trong khi sử dụng độ sắc và độ bão hòa của màu đáy.
• overlay: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “overlay”. Nó kết hợp chế độ “multiply” với chế độ “screen”.
• hard-light: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “hard-light”. Nó tương tự như chế độ “overlay”, nhưng có thể tạo ra hiệu ứng khác biệt và độc đáo.
• soft-light: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “soft-light”. Nó giúp làm mờ các cạnh và tạo ra một hiệu ứng ánh sáng mờ.
• exclusion: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “exclusion”. Nó tương tự như chế độ “difference”, nhưng tạo ra một hiệu ứng màu sắc khác biệt và thú vị.
• hue: Kết quả của chế độ này là sự kết hợp của độ sắc của hình ảnh nền với độ sáng và độ bão hòa của màu nền.
• color-burn: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “color-burn”. Nó giúp tăng độ sáng của ảnh nền.
• color: Chế độ này được sử dụng để đặt chế độ pha trộn thành chế độ “color”. Nó giữ nguyên độ sáng của màu nền và độ sắc và độ bão hòa của hình ảnh nền.

Ví dụ

Dưới đây là một số ví dụ về cách sử dụng thuộc tính CSS background-blend-mode:

.blend-mode {
  background-image: url('background.jpg'), url('overlay.png');
  background-blend-mode: multiply;
}

.blend-mode2 {
  background-image: url('background.jpg'), url('overlay.png');
  background-blend-mode: screen;
}

.blend-mode3 {
  background-image: url('background.jpg'), url('overlay.png');
  background-blend-mode: lighten;
}

Trong ví dụ trên, chúng ta sử dụng hai hình ảnh làm lớp nền và thiết lập thuộc tính CSS background-blend-mode về giá trị “multiply”, “screen” và “lighten”, lần lượt tương ứng cho từng ví dụ.

Ưu và Nhược điểm CSS background-blend-mode

Ưu điểm

• Tăng tính đồ họa của trang web
• Tạo ra các hiệu ứng độc đáo, thu hút người d – Dễ dàng kết hợp với các thuộc tính CSS khác để tạo ra các hiệu ứng phức tạp hơn

Nhược điểm

• Thuộc tính này không được hỗ trợ trên Edge/Internet Explorer. Do đó, nếu bạn muốn sử dụng nó, bạn cần phải sử dụng các trình duyệt khác như Chrome, Firefox, Safari, Opera, v.v.
• Nếu sử dụng quá nhiều thuộc tính blend mode, trang web có thể bị giảm tốc độ và gây ra lỗi.

Lời khuyên CSS background-blend-mode

Khi sử dụng thuộc tính CSS background-blend-mode, bạn nên cân nhắc về mục đích của việc sử dụng nó. Nếu bạn chỉ muốn tăng tính thẩm mỹ của trang web của mình, hãy sử dụng các chế độ blend mode đơn giản như “multiply”, “screen” hoặc “overlay”. Nếu bạn muốn tạo ra các hiệu ứng độc đáo và phức tạp hơn, hãy sử dụng nhiều chế độ blend mode và kết hợp chúng với các thuộc tính CSS khác.

Ngoài ra, hãy nhớ rằng thuộc tính CSS background-blend-mode có thể ảnh hưởng đến tốc độ tải trang web của bạn. Vì vậy, hãy cân nhắc và kiểm tra lại các hiệu ứng nếu trang web của bạn chậm hoặc gặp lỗi.