bug1281593.html (926B)
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <title>Transform and Blend Mode</title> 6 <style> 7 body { 8 background: cornflowerblue; 9 } 10 .box-blend-mode { 11 width: 64px; 12 height: 64px; 13 margin-bottom: 1em; 14 background-color: hsla(0,0%,0%,.25); 15 mix-blend-mode: multiply; 16 } 17 .box-blend-mode-inner { 18 width: 48px; 19 height: 48px; 20 background-image: url("../backgrounds/transparent-32x32.png"); 21 background-position: center center; 22 background-repeat: no-repeat; 23 mix-blend-mode: multiply; 24 } 25 26 .box-blend-mode-inner.transformed { 27 transform: rotate(45deg); 28 } 29 30 </style> 31 </head> 32 <body> 33 <div class="box-blend-mode"> 34 <div class="box-blend-mode-inner"></div> 35 </div> 36 <div class="box-blend-mode"> 37 <div class="box-blend-mode-inner transformed"></div> 38 </div> 39 </body> 40 </html>