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>


Ask Questions

Ask Question