How do I make a certain color transparent on a web page?

Question

I'm looking for an html code that allows one color on the entire page to be transparent, I had one a long time ago but can't find it again :-/ It's like if you have a picture of a circle, you would make the rest of the picture neon green [since it has to be a square when uploaded] and then put in the little code and use neon green as the color, then on the page you can't see the green border, just the circle. Does this sound familiar to anyone? Or any code that would allow me to turn part of the picture transparent without using any special programs.. Thanks!

dhmcconniel · Accepted Answer

What you're looking for is called 

transparent GIF

search the Internet for a detailed "how to".

Penumbra · Answer

This isn't an HTML feature. There may be a CSS trick, but not in the currently supported variations of CSS (at least I dont' think so). The transparency has to be part of the image. PNG and GIF are the more common formats that support what you want. Sadly, you will need a special program that can output a .gif or .png with a transparency channel, but there are lots of free image editors out there. The GIMP is the big one and I've heard some good things about Paint.Net if you're a windows person.

Bluetorch · Answer

Transparency is a property outside the color itself, also known as alpha component. You can't code it as RGB.

If you want a transparent background, you can do this:

background: transparent;

Additionally, I don't know if it might be helpful or not but, you could set the opacity property:

.half{
  opacity: 0.5;
  filter: alpha(opacity=50);
}

You need both in order to get it working in IE and all other decent browsers.

Anonymous · Answer

If you are not thinking on the transparency of a GIF or PNG image, then you might be thing of the CSS properties of opacity:

http://www.w3schools.com/Css/css_image_transparency.asp
http://css-tricks.com/css-transparency-settings-for-all-broswers/
http://www.quirksmode.org/css/opacity.html
http://www.css3.info/preview/opacity/
http://www.cssdrive.com/index.php/examples/exampleitem/highlight_image_opacity/
https://developer.mozilla.org/en/CSS/opacity
http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
http://www.w3schools.com/Css/css_image_transparency.asp

Ron

Trending News

How do I make a certain color transparent on a web page?

4 Answers