Geek Answers Handbook

CSS3 - Blend Mode between Different HTML Elements

I have a good idea what the answer will be, but I just want to make absolutely sure.

I have two elements: div.glass and div.sound , both contain a background image. Is it possible to set the blending mode for each div so that they interact with each other? For instance:

 div.glass, div.sound { width: 597px; height: 154px; position: absolute; } div.glass { background: url(glass.png) 0 0 no-repeat; z-index: 9; top: 5px; left: 5px; } div.sound { background: url(soundwave.png) 0 0 no-repeat; z-index: 10; blend-mode: multiply; top: 50px; left: 300px; } div.container { position: relative; } 
 <div class="container"> <div class="glass"></div> <div class="sound"></div> </div>
+5
source share
3 answers

You have 2 ways to use blend modes

When doing this in the same element, the property is the -blend-mode background.

But by doing this with two elements. this is mix-blend-mode

 div.glass, div.sound { width: 597px; height: 154px; position: absolute; } div.glass { background: url(http://placekitten.com/1200/900) 0 0 no-repeat; z-index: 9; top: 5px; left: 5px; } div.sound { background: url(http://placekitten.com/1000/750) 0 0 no-repeat; z-index: 10; mix-blend-mode: difference; top: 50px; left: 300px; } div.container { position: relative; } 
 <div class="container"> <div class="glass"></div> <div class="sound"></div> </div>
+5
source

You might need background-blend-mode instead of blend-mode :

 div.glass, div.sound { width: 597px; height: 154px; position: absolute; } div.glass { background: url("http://i656.photobucket.com/albums/uu288/dragon-g/glass.png") 0 0 no-repeat; z-index: 9; top: 5px; left: 5px; } div.sound { background: url("http://vignette3.wikia.nocookie.net/youngjustice/images/e/ee/Sound.png/revision/latest?cb=20130330173251") 0 0 no-repeat; z-index: 10; background-blend-mode: multiply; top: 50px; left: 300px; } div.container { position: relative; } 
 <div class="container"> <div class="glass"></div> <div class="sound"></div> </div>
0
source

You can add two backgrounds for one div. Thus, you can use the background-blend-mode property to mix two images.

Here is an example: https://jsfiddle.net/4mgt8occ/3/

HTML

 <div class="container"> <div class="glass_sound"></div> </div>

CSS

 div.glass_sound { width:300px; height: 300px; background-size: 100%; } .glass_sound { background-image: url('https://unsplash.imgix.net/photo-1430760814266-9c81759e5e55?dpr=2&fit=crop&fm=jpg&q=75&w=1050'), url('https://unsplash.imgix.net/photo-1431184052543-809fa8cc9bd6?dpr=2&fit=crop&fm=jpg&q=75&w=1050'); background-blend-mode: multiply; }
0
source

More articles:


All Articles