Thuộc tính mix-blend-mode trong CSS - Pha trộn lớp

Thuộc tính mix-blend-mode thiết lập cách nội dung phần tử pha trộn với nền của phần tử cha trực tiếp.

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;

Ví dụ 1: normal, darken, lighten, hue

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  height: 800px;
  background-color: brown;
}
img {
  width: 33.3%;
  height: auto;
  float: left;
}
.demo1 { mix-blend-mode: normal; }
.demo2 { mix-blend-mode: darken; }
.demo3 { mix-blend-mode: lighten; }
.demo4 { mix-blend-mode: hue; }
</style>
</head>
<body>
<h2>Học Xamarin</h2>
<div class="container">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Lưu ý:</strong> mix-blend-mode không được hỗ trợ trong Internet Explorer hoặc Edge cũ.</p>
</body>
</html>

Kết quả

Ví dụ 2: color-dodge, color-burn, exclusion, saturation

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  height: 800px;
  background-color: brown;
}
img {
  width: 33.3%;
  height: auto;
  float: left;
}
.demo1 { mix-blend-mode: color-dodge; }
.demo2 { mix-blend-mode: color-burn; }
.demo3 { mix-blend-mode: exclusion; }
.demo4 { mix-blend-mode: saturation; }
</style>
</head>
<body>
<h2>Học Xamarin</h2>
<div class="container">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo1" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo2" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo3" width="300" height="300">
  <img src="https://www.tutorialspoint.com/xamarin/images/xamarin-mini-logo.jpg" alt="Xamarin" class="demo4" width="300" height="300">
</div>
<p><strong>Lưu ý:</strong> mix-blend-mode không được hỗ trợ trong Internet Explorer hoặc Edge cũ.</p>
</body>
</html>

Kết quả

Phân nhóm chế độ pha trộn: