¿Es posible con CSS hacer transparente el fondo de un elemento (o semi-transparente), pero dejar su contenido (texto e imágenes) totalmente visibles?
Además quiero hacerlo sin tener que encerrar el texto e imágenes en nuevos elementos. Así que el código HTML sería algo como:
<p> <span> Hola Mundo </span> <img src="imagen.jpg"> </p>
Y el CSS que he probado es este:
p { background-color:green; filter:alpha(opacity=60); opacity:.6; } span, img { color:white; filter:alpha(opacity=100); opacity:1; }
El problema es que el texto y la imagen también se ven semi-transparentes, así que no se qué hacer.
Estás leyendo una traducción autorizada de la pregunta Transparent background, but not the content (text & images) inside it, in CSS only? planteada por Stijn Sanders en StackOverflow.
Respuestas
Para conseguirlo tendrás que utilizar CSS3 para aplicar un color semi-transparente:
p { background-color: rgba(255, 0, 0, 0.5); }
Los tres primeros números son las componentes R, G y B del color. El cuarto número indica la opacidad y su valor puede variar entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco).
Si utilizas una versión antigua de Internet Explorer que no soporta CSS3, puedes aplicar el filtro gradient de la siguiente manera:
p { filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00'); }
El primer valor hexadecimal del filtro anterior es el color utilizado en el fondo del elemento.
Con todo esto, aquí tienes la solución completa que funciona en cualquier navegador:
p { /* Navegadores que no soportan colores semitransparentes */ background: rgb(0, 0, 0) transparent; /* Color semi-transparente */ background: rgba(0, 0, 0, 0.6); /* Versiones antiguas de Internet Explorer */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* Internet Explorer 8 o superior */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; }
@librosweb