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.
Related
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...
I downloaded a transparent png from findicons.com, and I thought that if I placed this png on my html page, that has a gradient colored background, I would only see the icon (a down arrow in this case).
Instead, however, I see the icon and a white(ish) box surrounding the icon. Have tried setting the background style to transparent or inherit and border to none, but that does not seem to help.
I'm not sure what my problem is here. Is it the fact that I have a body background that is a gradient color ? Is it the fact that I'm using a PNG ?
Is it because the icon I downloaded isn't transparent, even though the site where I downloaded it from says it is ?
Is it because I'm just starting out building a website ?
Please, any suggestions ?
Thanks.
This is a page where I'm trying to achieve this :
Not working example
In your example, your image is within button tag. Button tag have a default background. You can set the background of your button to none, it should work.
I'm trying to put a png image in the body of my html. The challenge is that my background is grey (for now, but could change) and the png background that is supposed to be transparent is white. How do I tell html to see the image as a png and not a regular image? Can I set it to transparent or do I have to specify a background color (transparent would be ideal if I change my background)?
My code is currently
<img src="{% static 'livestream/images/streamON.png' %}" alt="on" width="300" height="300">
Transparency is not done in HTML, but is a part of the image itself. The browser will see the image as a PNG and display it as a PNG automatically. To add transparency to the image, you will have to edit the file with a graphics editor like Photoshop.
HTML will get the image transparency if there is already.
You can use this to remove the background color without any image tool.
If your image already has a transparent background, but it's inside a button, then that could be the problem. The button's color may be different than your background's color
Use Photoshop, Fireworks (or any other image editing software) to remove the background of the PNG. When saving, you should mark it as having "transparency".
This question has nothing to do with HTML though.
you need to use transparent image. which can be created by using photoshop or any other image editing software
http://i.stack.imgur.com/sCNJW.png
or you can use css transparency as shown in below link
http://css-tricks.com/css-transparency-settings-for-all-broswers/
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
How can I add a background image to an element and make it transparent?
CSS doesn't provide a way to add translucency to just a background image.
You can use the opacity property to make the entire element (content and children included) translucent.
You can use rgba() colour values to make a plain background translucent.
If you want a translucent background image, your best bet is to edit the image itself (and save it in a format that supports translucency, such as PNG).
Did you mean the alpha() and opacity() property?
Take a look here http://www.w3schools.com/css/css_image_transparency.asp