opacity-flattening-large-image.html (1583B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Opacity Flattening for Large Images</title> 6 <style> 7 div { 8 display: inline-block; 9 height: 40px; 10 width: 40px; 11 opacity: 0.25; 12 } 13 14 .png40x40 { 15 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoAQMAAAC2MCouAAAAA1BMVEUAAACnej3aAAAADElEQVQI12NgGFkAAADwAAHXt5aiAAAAAElFTkSuQmCC) no-repeat; 16 } 17 18 .png40x4096 { 19 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABAAAQMAAAA6ETG7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgMmIF9RQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14IX2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMAtYAAAAfQusroAAAAASUVORK5CYII=) no-repeat; 20 } 21 22 .png40x4097 { 23 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAABABAQMAAADxTeIeAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5QceCDgchTZtIQAAAANQTFRFAAAAp3o92gAAAC5JREFUGBntwTEBAAAAwiD7p14JT2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBJYAYAAYO1lz8AAAAASUVORK5CYII=) no-repeat; 24 } 25 26 .png4096x40 { 27 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAAAAAAoAQMAAABETK3BAAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAACAFwNQKAAB/x49MAAAAABJRU5ErkJggg==) no-repeat; 28 } 29 30 .png4097x40 { 31 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAEAEAAAAoAQMAAACrjsb/AAAAA1BMVEUAAACnej3aAAAAK0lEQVR42u3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAACANwNQUAABp9gL6AAAAABJRU5ErkJggg==) no-repeat; 32 } 33 </style> 34 </head> 35 36 <body> 37 <div class="png40x40"></div> 38 <div class="png40x4096"></div> 39 <div class="png40x4097"></div> 40 <div class="png4096x40"></div> 41 <div class="png4097x40"></div> 42 </body> 43 </html>