Chế độ trộn

Hai tông màu là một cách xử lý màu phổ biến trong nhiếp ảnh, giúp hình ảnh trông như chỉ bao gồm hai màu tương phản: một màu cho vùng sáng và một màu cho vùng tối. Tuy nhiên, làm cách nào để thực hiện việc này bằng CSS?

Bằng cách sử dụng chế độ kết hợp và các kỹ thuật khác mà bạn đã tìm hiểu, chẳng hạn như bộ lọcphần tử mô phỏng, bạn có thể áp dụng hiệu ứng này cho bất kỳ hình ảnh nào.

Chế độ kết hợp là gì?

Chế độ kết hợp thường được dùng trong các công cụ thiết kế như Photoshop để tạo hiệu ứng bố cục bằng cách kết hợp màu sắc từ hai hoặc nhiều lớp. Bằng cách thay đổi cách phối màu, bạn có thể đạt được hiệu ứng hình ảnh thực sự thú vị. Bạn cũng có thể sử dụng các chế độ kết hợp làm tiện ích, chẳng hạn như tách một hình ảnh có nền trắng để hình ảnh đó có nền trong suốt.

Bạn có thể sử dụng hầu hết các chế độ kết hợp có trong công cụ thiết kế bằng CSS, bằng cách sử dụng thuộc tính mix-blend-mode hoặc background-blend-mode. mix-blend-mode áp dụng tính năng kết hợp cho toàn bộ phần tử và background-blend-mode áp dụng tính năng kết hợp cho nền của một phần tử.

Bạn sử dụng background-blend-mode khi có nhiều nền trên một phần tử và muốn tất cả các nền đó hòa quyện vào nhau.

mix-blend-mode ảnh hưởng đến toàn bộ phần tử, bao gồm cả các phần tử giả. Một trường hợp sử dụng là trong ví dụ ban đầu về hình ảnh hai tông màu, trong đó các lớp màu được áp dụng cho phần tử thông qua các phần tử giả.

Chế độ kết hợp được chia thành hai loại: có thể tách và không thể tách. Chế độ phối màu có thể tách riêng xem xét từng thành phần màu, chẳng hạn như RGB. Chế độ kết hợp không thể tách rời xem tất cả các thành phần màu đều như nhau.

Khả năng tương thích với trình duyệt

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

Chế độ hoà trộn có thể tách

Bình thường

Đây là chế độ kết hợp mặc định và không thay đổi cách một phần tử kết hợp với các phần tử khác.

Nhân

Chế độ kết hợp multiply giống như việc xếp chồng nhiều lớp trong suốt lên nhau. Các điểm ảnh màu trắng sẽ xuất hiện trong suốt và các điểm ảnh màu đen sẽ xuất hiện màu đen. Mọi giá trị ở giữa sẽ nhân với các giá trị độ sáng (ánh sáng) của nó. Điều này có nghĩa là ánh sáng sẽ sáng hơn và tối hơn, thường tạo ra kết quả tối hơn.

.my-element {
  mix-blend-mode: multiply;
}

Màn hình

Việc sử dụng screen sẽ nhân các giá trị ánh sáng – một hiệu ứng nghịch đảo với multiply, và thường sẽ tạo ra kết quả sáng hơn.

.my-element {
  mix-blend-mode: screen;
}

Lớp phủ

Chế độ kết hợp này – overlay – kết hợp multiplyscreen. Màu tối cơ sở sẽ trở nên tối hơn và màu sáng cơ sở sẽ trở nên sáng hơn. Các màu trung bình, chẳng hạn như màu xám 50%, sẽ không bị ảnh hưởng.

.my-element {
  mix-blend-mode: overlay;
}

Làm tối

Chế độ kết hợp darken so sánh độ sáng màu tối của hình ảnh nguồn và hình nền rồi chọn hình ảnh tối nhất trong hai hình ảnh đó. Phương thức này thực hiện việc này bằng cách so sánh các giá trị rgb thay vì độ sáng (như multiplyscreen sẽ thực hiện), cho mỗi kênh màu. Với darkenlighten, các giá trị màu mới thường được tạo từ quá trình so sánh này.

.my-element {
  mix-blend-mode: darken;
}

Làm sáng

Việc sử dụng lighten sẽ làm ngược lại với darken.

.my-element {
  mix-blend-mode: lighten;
}

Giảm độ tương phản

Nếu bạn sử dụng color-dodge, màu nền sẽ sáng hơn để phản ánh màu nguồn. Màu đen thuần tuý không bị ảnh hưởng bởi chế độ này.

.my-element {
  mix-blend-mode: color-dodge;
}

Tăng độ tương phản

Chế độ kết hợp color-burn rất giống với chế độ kết hợp multiply, nhưng tăng độ tương phản, dẫn đến các tông màu trung tính bão hoà hơn và giảm độ sáng.

.my-element {
  mix-blend-mode: color-burn;
}

Ánh sáng cứng

Việc sử dụng hard-light sẽ tạo ra độ tương phản sống động. Chế độ kết hợp này lọc hoặc nhân các giá trị độ sáng. Nếu giá trị pixel sáng hơn 50% màu xám, hình ảnh sẽ sáng hơn, như thể được lọc. Nếu màu tối hơn, giá trị này sẽ được nhân lên.

.my-element {
  mix-blend-mode: hard-light;
}

Sáng dịu nhẹ

Chế độ kết hợp soft-light là phiên bản overlay ít khắc nghiệt hơn. Cách này hoạt động tương tự nhưng có độ tương phản thấp hơn.

.my-element {
  mix-blend-mode: soft-light;
}

Chênh lệch

Một cách hay để hình dung cách hoạt động của difference cũng giống như cách hoạt động của ảnh âm. Chế độ kết hợp difference lấy giá trị chênh lệch của mỗi pixel, đảo ngược màu sáng. Nếu giá trị màu giống nhau, thì các giá trị đó sẽ chuyển sang màu đen. Sự khác biệt về giá trị sẽ đảo ngược.

.my-element {
  mix-blend-mode: difference;
}

Loại trừ

Việc sử dụng exclusion rất giống với difference, nhưng thay vì trả về màu đen cho các pixel giống hệt nhau, hàm này sẽ trả về 50% màu xám, dẫn đến kết quả mềm hơn với độ tương phản thấp hơn.

.my-element {
  mix-blend-mode: exclusion;
}

Chế độ kết hợp không thể tách

Bạn có thể coi các chế độ kết hợp này như các thành phần màu HSL. Mỗi lớp lấy một giá trị thành phần cụ thể từ lớp đang hoạt động và kết hợp giá trị đó với các giá trị thành phần khác.

Sắc độ

Chế độ kết hợp hue lấy sắc độ của màu nguồn và áp dụng sắc độ đó cho độ bão hoà và độ sáng của màu phông nền.

.my-element {
  mix-blend-mode: hue;
}

Độ rực màu

Cách này hoạt động giống như hue, nhưng việc sử dụng saturation làm chế độ kết hợp sẽ áp dụng độ bão hoà của màu nguồn cho sắc độ và độ sáng của màu phông nền.

.my-element {
  mix-blend-mode: saturation;
}

Màu

Chế độ phối color sẽ tạo ra một màu từ sắc độ và độ bão hoà của màu nguồn cũng như độ sáng của màu phông nền.

.my-element {
  mix-blend-mode: color;
}

Độ sáng

Cuối cùng, luminosity là giá trị nghịch đảo của color. Hàm này tạo một màu có độ sáng của màu nguồn, sắc thái và độ bão hoà của màu phông nền.

.my-element {
  mix-blend-mode: luminosity;
}

Thuộc tính isolation

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

Nếu bạn đặt thuộc tính isolation có giá trị là isolate, thì thuộc tính này sẽ tạo một ngữ cảnh xếp chồng mới, ngăn việc kết hợp với lớp nền. Như bạn đã tìm hiểu trong mô-đun z-index, khi bạn tạo một ngữ cảnh xếp chồng mới, lớp đó sẽ trở thành lớp cơ sở. Điều này có nghĩa là các chế độ kết hợp cấp mẹ sẽ không còn áp dụng nữa, nhưng các phần tử bên trong một phần tử có isolation: isolate được đặt có thể vẫn kết hợp.

Xin lưu ý rằng cách này không hoạt động với background-blend-mode vì thuộc tính nền đã được tách biệt.

Kiểm tra mức độ hiểu biết

Kiểm tra kiến thức của bạn về chế độ kết hợp

Chế độ kết hợp CSS nào sau đây?

Làm sáng
Nhân
Dullen
Làm sáng
Lớp phủ
Chênh lệch

Nếu muốn kết hợp nhiều màu theo nhiều cách, bạn cần sử dụng kiểu chế độ kết hợp nào?

Có thể tách rời
Không thể tách rời