Transparent backgrounds

Base64, RGBA, plain image

by OmShiv

HTML

<div class="main">
	<div class="box one"> BG Image as a 50% transparent PNG</div>
    <div class="box two"> Base64 dataURI of above PNG</div>
    <div class="box three"> RGBA with 0.5 opacity &emsp;&emsp; <code>background: rgba(0,0,0, 0.5);</code> </div>
</div>

CSS

body {
    color: yellow;
    font-size: 15px;
    font-family: "Cambria", Garamond, Helvetica, sans-serif;
}
.main, .box { padding: 20px; }
.main { background: url("http://subtlepatterns.com/patterns/arab_tile.png") 0 0; }
.box { margin-top: 10px; border: 1px solid #999; border-radius: 2px; }

.box.one { background-image: url("http://i.imgur.com/lPQm8Fy.png"); }
.box.two { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGElEQVR42mNkYGCoZyABMDGQCEY1jBQNAD+jAJe/Rx5TAAAAAElFTkSuQmCC); }
.box.three { background: rgba(0,0,0, 0.5); }

JavaScript

/* 

 IMPORTANT Note !!!!
    
 JS fiddle will not load externally hosted images in the demo.
 This is a common JSfiddle problem.
 
 So you might have to open the following images in new tab, 
 and then reload this fiddle page

    -- http://subtlepatterns.com/patterns/arab_tile.png
    -- http://i.imgur.com/lPQm8Fy.png
    
*/