JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<p>No background</p>
<img class="original" src="http://icons.iconarchive.com/icons/tristan-edwards/sevenesque/1024/Preview-icon.png"/>
<p>Red background</p>
<img class="redbg" src="http://icons.iconarchive.com/icons/tristan-edwards/sevenesque/1024/Preview-icon.png"/>
<p>Red background with 0.2 opacity</p>
<img class="redbg transparent" src="http://icons.iconarchive.com/icons/tristan-edwards/sevenesque/1024/Preview-icon.png"/>
<p>Red background with 0.2 opacity, wrapped using jquery</p>
<img class="redbg transparent wrapit" src="http://icons.iconarchive.com/icons/tristan-edwards/sevenesque/1024/Preview-icon.png"/>
CSS
img
{
width:300px;
}
.redbg
{
background:red;
}
.transparent
{
opacity:0.2;
}
.redwrapper
{
background:red;
display: inline-block;
}
JavaScript
$(".wrapit").wrap("<div class='redwrapper'></div>" );