Which Is Superior, CSS Transparency or Png Transparency

Which is superior, CSS transparency or PNG Transparency?

They're two different solutions to two different problems. CSS transparency (I assume you're referring to the opacity property) will make an entire element (its border, background and content) transparent, whereas alpha PNG transparency is only useful in situations where you'd use images, for example an elements background.

I cant think of many situations where you could use either to the same effect.

There are of course RGBA colours in CSS3, however browser support is currently too low for it to be a viable option in public facing sites/applications.

P.S. I can't say I've run into any FF3 alpha PNG performance issues myself.

---

Follow-up to comment:

OK. In that case I'd go for the CSS opacity property.

Although the filters performance may not be optimal in IE6, it means you don't have to waste bandwidth and an additional HTTP request on an image. Plus, if you wanted to get the image to work in IE6 as well you'd have to use AlphaImageLoader, which I'm sure would be just as slow (if not slower) than the alpha filter.

Whats is the best way to make image transparent?

Save the image as a transparent png. Not all browsers support the opacity style.

What is the best to display a transparent image on a website?

I believe that most (if not all) .png fixes do not work for repeating or positioned backgrounds, so you will need to use a single image as the background. You would need to re-create these background images if the content of your site changed to have longer blocks of copy in these areas, as the static background images will not scale to your content.

Consider the fact that using a .png is not the best choice in terms of accessibility for visually impaired users.

For users which need to have an increased font size for reading text on screen, the text may end up running outside of the container with the .png background, and may in these cases become unreadable.

The best bet may be to use css3 to style the container, and have it fall back to square corners for IE users.

Is there a color code for transparent in HTML?

There is not a Transparent color code, but there is an Opacity styling. Check out the documentation about it over at developer.mozilla.org

You will probably want to set the color of the element and then apply the opacity to it.

.transparent-style{

    background-color: #ffffff;
    opacity: .4;

}

You can use some online transparancy generatory which will also give you browser specific stylings. e.g. take a look at http://www.css-opacity.pascal-seven.de/

Note though that when you set the transparency of an element, any child element becomes transparent also. So you really need to overlay any other elements.

You may also want to try using an RGBA colour using the Alpha (A) setting to change the opacity. e.g.

.transparent-style{
    background-color: rgba(255, 255, 255, .4);
}

Using RGBA over opacity means that your child elements are not transparent.

CSS performance: is it okay to make significant use of an overlaid pattern on coloured elements?

Performance of what? If performance of loading, then using fewer files will speed things up. If performance of scrolling, that will depend on how you build it and your target audience.

I built a site years ago which had a US audience and used a monochromatic transparent PNG which overlaid a solid color. I tested this on quite a few machines. The only display performance issues were if something was scrolling over the top of something else that wasn't. For example, if you have two patterns overlaid and one scrolls but the other does, you're going to see some redraw issues on slower machines and mobile devices.

This was only for a handful of elements, including the page background. If you're applying it on dozens of elements per page, that might start showing issues on older machines. But it will still be less resource intensive than, for example, a large JS slider with transitions.

CSS Background Opacity

Children inherit opacity. It'd be weird and inconvenient if they didn't.

You can use a translucent PNG file for your background image, or use an RGBa (a for alpha) color for your background color.

Example, 50% faded black background:

<div style="background-color:rgba(0, 0, 0, 0.5);">   <div>      Text added.   </div></div>

IE PNG transparency issue + TwinHelix

The .htaccess file is not empty for me. It says:

AddType text/x-component .htc

---

Related Topics