<!DOCTYPE html> <html> <head> <style type="text/css"> div { background-color: white; position: absolute; margin: 0px; padding: 0px; width: 100px; height: 100px; top: 10px; } div.auto { left: 10px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); } div.alpha { left: 120px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="blue" fill-opacity="1"/></svg>'); } div.luminance1 { left: 230px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(238,238,255)" fill-opacity="1"/></svg>'); } div.luminance2 { left: 340px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(201,201,255)" fill-opacity="1"/></svg>'); } div.luminance3 { left: 450px; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect x="0" y="0" width="100%" height="100%" fill="rgb(73,73,255)" fill-opacity="1"/></svg>'); } </style> </head> <body> <div class="auto"></div> <div class="alpha"></div> <div class="luminance1"></div> <div class="luminance2"></div> <div class="luminance3"></div> </body> </html>