mix-blend-mode-child-of-blended-has-opacity.html (1331B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: blending between an element and the child with opacity</title> 5 <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com"> 6 <link rel="help" href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode"> 7 <meta name="flags" content=""> 8 <meta name="assert" content="Test checks that an element with mix-blend-mode and his child with opacity blends as a group(no blending between the element with mix-blend-mode and the child element)"> 9 <link rel="match" href="reference/mix-blend-mode-child-of-blended-has-opacity-ref.html"> 10 <style> 11 .parent { 12 opacity: 0.9; 13 background: yellow;/*rgb(255,255,0);*/ 14 margin: 30px; 15 width: 120px; 16 height: 120px; 17 display: inline-block; 18 } 19 .blended { 20 width: 100px; 21 height: 100px; 22 background: fuchsia; /* rgb(255, 0, 255);*/ 23 display: inline-block; 24 mix-blend-mode: difference; 25 margin-top: 10px; 26 margin-left: 10px; 27 } 28 .childBlended { 29 background: red;/*rgb(255,0,0);*/ 30 width: 80px; 31 height: 80px; 32 margin-top: 10px; 33 margin-left: 10px; 34 opacity: 0.99; 35 } 36 </style> 37 </head> 38 <body> 39 <div class="parent"> 40 <div class="blended"> 41 <div class="childBlended"></div> 42 </div> 43 </div> 44 </body> 45 </html>