1
You can use linear-gradient
and choose the color you want. In this reply you can see other examples with different colors.
div {
height: 200px;
width: 300px;
background:
linear-gradient(rgba(255,255,0,.5),rgba(255,255,0,.5)),
url(data:image/jpeg;base64,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) no-repeat;
}
<div></div>
Whenever you use any property, remember to check the compatibility of browsers.
Maybe on this link you can get something http://www.maujor.com/tutorial/css3-filters.php
– user60252
Using the
hue-rotate(0deg a 360deg)
I think you’ll get what you want. But you can put adiv
superimposing the image and using the colorsrgba
to apply a transparency layer. Something likergba: (255,0,0,0.2)
you could put a semi-transparent red.– Raizant