JSFiddle - React, Tailwind, and code Playground

by Radiocity

HTML

<div>
    <span>Default</span>
</div>

<div class="opacity50">
    <span>Opacity: 50%</span>
</div>

<div class="opacityrgba">
    <span>RGBA: #333 with 50% alpha (IE9+)</span>
</div>

<div class="opacityimg">
    <span>Background-image with 50% opacity (IE7+)</span>
</div>

CSS

body{
 background: url('http://www.stripegenerator.com/generators/generate_shared_stripe.php?stripe=1196')  repeat top left; 
}

div{
 background: #333;  
margin:8px;
 padding:8px;   
}

span{
 background: #b91c19;
 color:white;    
}

.opacity50 {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

.opacityrgba{
    background-color: rgba(51,51,51,0.5);
}

.opacityimg{
 background: url('http://storage9.static.itmages.com/i/12/0605/h_1338914851_4664819_78f77966b8.png')  repeat top left; 
}