Lớp này chấp nhận nhiều giá trị trong Tailwind CSS, bao gồm tất cả thuộc tính dạng class. Class này dùng để chỉ định cách nội dung hòa trộn với background. Trong CSS, ta dùng thuộc tính CSS mix-blend-mode.
Các class Mix Blend Mode:
- mix-blend-normal: Không áp dụng hiệu ứng hòa trộn nào cho phần tử.
- mix-blend-multiply: Nhân màu của phần tử với màu nền. Màu kết quả luôn tối hơn màu nền.
- mix-blend-screen: Nhân màu của phần tử với màu nền sau đó đảo ngược kết quả. Màu kết quả luôn sáng hơn một trong các lớp được trộn.
- mix-blend-exclusion: Trừ màu tối hơn trong hai màu từ màu sáng nhất của phần tử. Kết quả tương tự 'difference' nhưng độ tương phản thấp hơn.
- mix-blend-overlay: Áp dụng 'multiply' cho màu sáng hơn và 'screen' cho màu tối hơn trong phần tử. Hiệu ứng này ngược lại với 'hard-light'.
- mix-blend-darken: Thay thế màu nền bằng màu của phần tử ở những chỗ phần tử tối hơn.
- mix-blend-lighten: Thay thế màu nền bằng màu của phần tử ở những chỗ phần tử sáng hơn.
- mix-blend-color-dodge: Làm sáng màu nền để phản ánh màu của phần tử.
- mix-blend-color-burn: Làm tối màu nền để phản ánh màu tự nhiên của hình ảnh. Kết quả là tăng độ tương phản giữa phần tử và nền.
- mix-blend-hard-light: Áp dụng 'multiply' trên màu sáng hơn và 'screen' trên màu tối hơn của phần tử. Hiệu ứng này ngược lại với 'overlay'.
- mix-blend-soft-light: Áp dụng 'multiply' trên màu sáng hơn và 'screen' trên màu tối hơn trong phần tử. Kết quả mềm mại hơn so với 'overlay'.
- mix-blend-difference: Trừ sự khác biệt tuyệt đối giữa màu nền và màu của phần tử.
- mix-blend-hue: Áp dụng hue của phần tử với saturation và luminosity của background.
- mix-blend-saturation: Áp dụng saturation của phần tử với hue và luminosity của background.
- mix-blend-color: Áp dụng hue và saturation của phần tử với luminosity của background.
- mix-blend-luminosity: Áp dụng luminosity của phần tử với hue và saturation của background.
Cú pháp:
<div class="mix-blend-{mode}" >
...
</div>
Lưu ý: Thuộc tính CSS mix-blend-mode thiết lập cách nội dung của một phần tử hòa trộn với nội dung của phần tử cha và background của phần tử.
Ví dụ 1: Đoạn code sau sử dụng các class mix-blend-normal, mix-blend-multiply, mix-blend-overlay.
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="m-auto bg-pink-100 w-2/6 h-25 p-3">
<h3 class="text-center">
mix-blend-mode
</h3>
<div class="mix-blend-normal p-8">
<h1>normal</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
</div>
<div class="mix-blend-multiply p-8">
<h1>multiply</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
</div>
<div class="mix-blend-overlay p-8">
<h1>overlay</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png">
</div>
</div>
</body>
</html>
Kết quả:
Ví dụ 2: Đoạn code sau sử dụng mix-blend-exclusion, mix-blend-color-burn và mix-blend-hard-light.
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body>
<div class="m-auto bg-pink-100 w-2/6 h-25 p-3">
<h1 class="text-center text-xl ">
mix-blend-mode
</h1>
<div class="mix-blend-color-burn p-8">
<h1>color-burn</h1>
<img class="h-35" src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />
</div>
<div class="mix-blend-hard-light p-8">
<h1>hard-light</h1>
<img class="h-40" src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />
</div>
<div class="mix-blend-exclusion p-8">
<h1>exclusion</h1>
<img class="h-40" src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" />
</div>
</div>
</body>
</html>
Kết quả:
