I have a lot of png-images, and now I want to change their color. I could open all these images in photoshop and add a Layer style - Color Overlay.
For example:
http://www.iconfinder.com/icondetails/103303/128/arrow_right_sans_icon
Change the black color to gray.
But is there an easy way to do this with HTML5/CSS3?
It's possible with just CSS but has so major limitations it's far from a perfect solution.
HTML
<img src="http://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_right-128.png"/>
CSS
img {
-webkit-mask-image:-webkit-linear-gradient(top, rgba(0, 0, 0,.4), rgba(0, 0, 0,.4));
}
The limitations being
Webkit only
Can only change black to something more transparent, i.e. grey. Colour masks are not possible.
See demo - Tested in Chrome 26.
(A bit late)
If you know the background will remain the same color throughout the entire website and you don't mind messing around a bit in Photoshop, you could of course fill the transparent part with your background color and cut out the icon to make that part transparent.
That way you can place a background color behind it and make it whatever color you want...
HTML
<img src="transparencyswitch.png" height="20" width="20"/>
CSS
img {
background-color: grey;
}
I recommend converting your PNG into a SVG. I had the same problem, till I did that. From there, you only have to change the fill color (which can also be dynamic for, for example, wordpress)
A way of doing this is to put the image in a div and put a div above that with opacity so you still can see the image a little bit but it has the color of the overlaying div.
Other ways aren't possible with html5/css3.
examples: here
Related
have some live computed graph images from a source we don't own, and they have a white background that doesn't fit well with where we are displaying them. Is there any html/css way of getting rid of the white background? (javascript isn't an option in this case)
I was looking at css masking - tried setting the mask-image to be the same image, and the mask mode to be luminance -
html:
<img src="https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048" >
css:
img {
mask-image: url(https://media.istockphoto.com/photos/bullfrog-rana-catesbeiana-picture-id637394324?s=2048x2048);
mask-mode: luminance;
}
that seemed to me that it should work - but it actually had no effect at all :(
First of all you should know this: https://caniuse.com/#search=mask
And then look at this fiddle: https://jsfiddle.net/9y27jaLh/1/
As explained in caniuse, there's partial support for webkit i.e. prefixed properties will work such as -webkit-mask-**
mask-mode is not supported in 90% of the browsers, including webkit based.
Also "luminance" means the areas with the brighter colors will show while the darker ones won't, and a whole gradient of in-betweens. So it's pretty much the exact opposite of what you need.
If it's just to change the background color, you might slightly tint it, perhaps with a semi-transparent overlay. If the images have a known shape, you could try clipping / masking with SVG patterns..
or maybe try to hack it setting the images as background and searching for a background-blend-mode that does the trick... sort of.
But no way to apply the same image as a mask to get rid of the white
How can I change the white color to the red, but only white should be changed, the rest should be what they are.
Using only CSS
CSS can't be used to dynamically edit certain pixels of an image, as far as I know.
Alternative solutions:
You could overlay another element over top of the image with a partially transparent red background to sort of "paint" the image red, but this wouldn't achieve exactly what you're asking for.
You could have another image to switch it to that has the red background. You'd switch the image likely by doing something like background-image: url(https://new_image_here)
You can use JavaScript or similar to modify the image or provide a fancier solution...
On a valid background, I need to add transparent holes/images that shows body background.
Like this websites;
skrill.com
skrillex.com
I can add it as a image but I should resize it according to resolution. Also I'll add some descriptions under this images.
Is there any way to do this?
There are three ways to achieve this effect:
Make the solid background a SVG or PNG, with holes cut through to show the underlying background.
Make the transparent images replicate the background.
Implement the background with <canvas> and use JS to achieve this effect by dynamically redrawing the background.
The sites you linked are using one of these approaches.
I have the image below - is it possible to fill it with a color (eg: the part in the triangle) using HTML/CSS?
Or can I create this shape with HTML/CSS and then fill it?
Or do I have to use a colored in image?
Would be preferable to use HTML/CSS completely or at least fill the image..
thx
If you leave the part that you want to fill transparant then you can fill it with a color using css. If you want to create the triangle without using an image you can use SVG but that is not supported in some versions of IE (8 and older) or you can use Raphael JS to draw it in pretty much all browsers.
HTML and CSS don't actually DO anything, they're just markup for how stuff should be presented. So no, you cannot edit an image using HTML and CSS only, though it is probably possible with JavaScript.
What you could do with HTML and CSS is to display an image with an alpha channel and set a background color on the element containing the image. The background color would then be displayed where the image is transparent.
you can... Make sure the triangle part of your png is transparent and the rest white... PLace your image in a div with the same width and height as your pic and give that div a background color. Voila... Everything is white except the transparent triangle.
Good luck.
<div style="width:66px;height:30px;background-color:green;">
<img src="yourimage" alt="" />
</div>
I want to know if it is possible to affect the opacity of only a certain color in an Image?
For example, I have a PNG image file that has a simple drawing on it (smiley face) and I set the backdrop to the color 'white' only. I want to use the image on a web page, but I want only the smiley face shown (no white backdrop).
Is there a way to do this?
Not in HTML or CSS but what you should do is open the image in a picture editor that supports PNG transparency and set your image background to transparent (or opacity = 0) instead of white.
Not with CSS. The best way to handle this would be to give your smiley face image a transparent background. That way, you could put a colored element behind it whenever you want to change its color.