Chế độ trộn

Podcast CSS – 024: Chế độ kết hợp

Duotone là một tuỳ chọn xử lý màu phổ biến dành cho nhiếp ảnh khiến hình ảnh trông giống như chỉ được tạo thành từ hai màu tương phản: một dùng cho vùng sáng và cái còn lại cho điều kiện ánh sáng yếu. Tuy nhiên, bạn có thể làm việc này như thế nào với CSS?

Sử dụng chế độ pha trộn—và các kỹ thuật khác mà bạn đã tìm hiểu, chẳng hạn như bộ lọc và phần tử giả – bạn có thể áp dụng hiệu ứng này cho mọi hình ảnh.

Chế độ pha trộn là gì?

Chế độ trộn 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 pha trộn màu sắc từ hai lớp trở lên. Bằng cách thay đổi cách kết hợp màu sắc, bạn có thể có được những hiệu ứng hình ảnh thực sự thú vị. Bạn cũng có thể dùng chế độ pha trộn để làm tiện ích, chẳng hạn như cách ly hình ảnh có nền trắng, nên ứng dụng sẽ có nền trong suốt.

Bạn có thể sử dụng hầu hết các chế độ pha trộn có sẵn trong công cụ thiết kế bằng CSS, sử dụng mix-blend-mode hoặc Thuộc tính background-blend-mode. mix-blend-mode áp dụng chế độ kết hợp cho toàn bộ phần tử và background-blend-mode áp dụng chế độ 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 chúng hoà hợp với 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 bộ đôi, có các lớp màu được áp dụng cho phần tử thông qua phần tử giả.

Chế độ trộn có 2 danh mục: tách rời và không thể tách biệt. Chế độ pha trộn tách biệt sẽ xem xét từng thành phần màu, như RGB. Chế độ pha trộn không thể tách biệt sẽ xem xét tất cả các thành phần màu như nhau.

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

mix-blend-mode

background-blend-mode

Chế độ kết hợp có thể phân tách

Bình thường

Đây là chế độ pha trộn mặc định và không thay đổi gì về cách một phần tử pha trộn với những phần tử khác.

Nhân

Chế độ kết hợp multiply giống như xếp nhiều tấm trong suốt lên nhau. Các pixel trắng sẽ xuất hiện trong suốt và các điểm ảnh đen sẽ có màu đen. Mọi giá trị ở giữa sẽ nhân các giá trị độ sáng (ánh sáng) của lớp đó. Tức là đèn sẽ sáng hơn và tối đi nhiều, 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ị light (ánh sáng) – một hiệu ứng nghịch đảo với multiply, và thường sẽ cho 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 multiply và screen. Màu tối cơ bản trở nên tối hơn và màu sáng cơ bản trở nên sáng hơn. Các màu tầm trung, chẳng hạn như 50% màu xám, 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 ảnh phông nền rồi chọn vùng tối nhất trong hai vùng đó. Thực hiện điều này bằng cách so sánh các giá trị rgb thay vì độ sáng (như multiply và screen sẽ thực hiện), cho từng kênh màu. Với darken và lighten, các giá trị màu mới thường được tạo trong quá trình so sánh này.

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

Lighten

Việc sử dụng lighten có ý nghĩa hoàn toàn ngược lại với darken.

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

Tránh màu

Nếu bạn sử dụng color-dodge, chế độ này sẽ làm sáng màu nền để phản ánh màu nguồn. Màu đen thuần tuý sẽ không có hiệu ứng từ chế độ này.

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

Hiệu ứng cháy màu

Chế độ trộn color-burn rất giống với chế độ trộn multiply, nhưng lại tăng độ tương phản, giúp tông màu trung bình bão hoà hơn và giảm các vùng 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 sàng 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ẽ được làm sáng, như thể máy tính được sàng lọc. Nếu chỉ số tối hơn, giá trị này sẽ được nhân lên gấp bội.

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

Ánh sáng dịu

Chế độ pha trộn soft-light là phiên bản ít gay cấn hơn của overlay. Chế độ này hoạt động theo cách tương tự nhưng ít tương phản 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 giống như cách hoạt động của ảnh phủ định. Chế độ kết hợp difference lấy giá trị khác nhau của từng pixel, đảo ngược màu sáng. Nếu các giá trị màu giống hệt nhau, chúng sẽ trở thành màu đen. Những 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ả lại màu đen cho các pixel giống nhau, nó sẽ trả về 50% màu xám, dẫn đến đầu ra mềm hơn với ít độ tương phản hơn.

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

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

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

Màu sắc

Chế độ pha trộn hue lấy sắc độ của màu nguồn và áp dụng thông số này cho độ bão hoà và độ sáng của màu nền.

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

Độ bão hòa

Tính năng này hoạt động giống như hue, nhưng việc sử dụng saturation làm chế độ pha trộn sẽ áp dụng độ rực màu của màu nguồn vào sắc độ và độ sáng của màu phông nền.

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

Màu

Chế độ pha trộn color sẽ tạo một màu dựa trên màu sắc và độ rực màu của màu nguồn và độ sáng của màu phông nền.

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

Độ sáng

Cuối cùng, luminosity là nghịch đảo của color. Tính năng này tạo ra một màu sắc với độ sáng của màu nguồn, sắc độ và độ rực màu của màu phông nền.

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

Thuộc tính isolation

Nếu bạn đặt isolation có giá trị isolate, nó sẽ tạo ra một ngữ cảnh xếp chồng mới, để hình ảnh không bị pha trộn với lớp phông nền. Như bạn đã tìm hiểu trong mô-đun chỉ mục z, khi tạo một ngữ cảnh xếp chồng mới, lớp đó trở thành lớp cơ sở. Điều này có nghĩa là các chế độ kết hợp cấp độ gốc 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ó tập hợp isolation: isolate có thể vẫn kết hợp.

Lưu ý rằng thao tác này không hoạt động với background-blend-mode vì thuộc tính nền đã bị tách riêng.

Kiểm tra kiến thức

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