Thuộc tính mix-Blend-mode được sử dụng để đặt cách nội dung của một phần tử sẽ kết hợp với nền gốc trực tiếp của nó. Sau đây là các giá trị thuộc tính -
mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|difference|exclusion|hue|saturation|color|luminosity;
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ -
<!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>Learn 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>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html> Đầu ra
Ví dụ
Bây giờ chúng ta hãy xem một ví dụ khác -
<!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>Learn 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>Note:</strong> The mix-blend-mode property is not supported in Internet Explorer or Edge.</p>
</body>
</html> Đầu ra
