Css Blending Example - Css
How to blend two images with css?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Blending is one of the most important graphics method used in css. The background-blend-mode is used to specify a blend mode for an elements background layer. Here,this code is used to blend two images into one.
<style>
.background-image {
width: 200px;
height: 200px;
background-size: 200px 200px;
background-repeat:no-repeat;
background-image: url('http://mathbits.com/MathBits/StudentResources/GraphPaper/halfpic.jpg'),
url('http://newflowerwallpaper.com/download/natural-flowers-images-and-wallpapers/natural-flowers-images-and-wallpapers-21.jpg');
background-blend-mode: multiply;
}
</style>
<div class="background-image"></div>
