CSS3 - विभिन्न HTML तत्वों के बीच मिश्रण मोड

Question

मुझे एक अच्छा विचार है कि उत्तर क्या होगा, लेकिन मैं बस पूरी तरह से सुनिश्चित करना चाहता हूं।

मेरे पास दो तत्व हैं, div.glass और div.sound, दोनों में पृष्ठभूमि-छवि होती है। क्या प्रत्येक div को मिश्रण मोड सेट करना संभव है ताकि वे एक दूसरे के साथ बातचीत कर सकें? उदाहरण के लिए:

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>

Answer 1

आप मिश्रण-मोड का उपयोग करने के लिए 2 तरीके हैं

एक ही तत्व में ऐसा करते समय, संपत्ति पृष्ठभूमि-मिश्रण-मोड है।

लेकिन, 2 तत्वों के साथ ऐसा करते समय। यह मिश्रण मिश्रण मोड

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>

Answer 2

आप blend-mode के बजाय background-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>

Answer 3

आप एक ही div के लिए दो पृष्ठभूमि जोड़ सकते हैं। इस तरह, आप दो छवियों को मिश्रण करने के लिए 'पृष्ठभूमि-मिश्रण-मोड' प्रॉपर्टी का उपयोग कर सकते हैं।

यहाँ एक उदाहरण है: https://jsfiddle.net/4mgt8occ/3/

एचटीएमएल

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

सीएसएस

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; 
      }