JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
<span></span>
CSS
div
{
display:block;
height:100px;
width:100px;
background-image: -webkit-linear-gradient(rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.3)), url('http://belgo.com/_Media/dscn2904.jpg');
}
span
{
display:block;
height:100px;
width:100px;
background: rgba(255, 0, 0, .5), url('http://belgo.com/_Media/dscn2904.jpg') no-repeat left top;
}