CSS - Background Blend Mode
<!DOCTYPE html>
<html>
<head>
<!--The background-blend-mode property defines the blending mode of each background layer(color and/or image)."Normal" is its default value -->
<style type="text/css">
*{
margin:100px;
padding:0;
}
.blend{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg'); /*You can do this with only images too*/
background-color:royalblue; /*You can add color too*/
background-blend-mode:screen;
}
.blend1{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:saturation;
}
.blend2{
width:500px;
background-size:cover;
height: 500px;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:multiply;
}
.blend3{
width:500px;
background-size:cover;
height: 500px;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:overlay;
}
.blend4{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:darken;
}
.blend5{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:lighten;
}
.blend6{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:color-dodge;
}
.blend7{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:color-burn;
}
.blend8{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:hard-light;
}
.blend9{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:soft-light;
}
.blend10{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:difference;
}
.blend11{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:exclusion;
}
.blend12{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:hue;
}
.blend13{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:color;
}
.blend14{
width:500px;
height: 500px;
background-size:cover;
background-image:linear-gradient(to right,orange,yellow),url('levi.jpg');
background-blend-mode:luminosity;
}
</style>
<title></title>
</head>
<body>
<h1>Below are the different types of background-blend-property:</h1>
<div class="blend"></div>
<div class="blend1"></div>
<div class="blend2"></div>
<div class="blend3"></div>
<div class="blend4"></div>
<div class="blend5"></div>
<div class="blend6"></div>
<div class="blend7"></div>
<div class="blend8"></div>
<div class="blend9"></div>
<div class="blend10"></div>
<div class="blend11"></div>
<div class="blend12"></div>
<div class="blend13"></div>
<div class="blend14"></div>
</body>
</html>
Comments
Post a Comment