¿Qué es lo mejor para mostrar una imagen transparente en un sitio web?

I've done CSS for many years, but I've always tried to stay away from transparent images or backgrounds due to the lack of support on older browsers. Right now I need to create rounded borders, and I know you can do this in CSS3, but just as well I can use a .png image. Neither is supported on ie6 - except there is a .png fix for ie6 which seems to work sometimes - so I'm wondering what the best approach is.

25% of my viewers use ie6 (most from middle eastern countries), so even though I wish I can pretend ie6 doesn't exist, I must.

preguntado el 08 de noviembre de 11 a las 14:11

Just use a PNG fix. It doesn't only work "sometimes" - it works in most cases. -

Is there any way you can match the background of your image with the background of your page? If you can't then PNG fix it is the best choice. -

2 Respuestas

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.

respondido 08 nov., 11:18

If the only thing you need is rounded corners, use CSS3 border-radius y entra PIE.htc for IE6 support. It's probably the easiest and simplest way to go about it.

respondido 09 nov., 11:00

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.