79 votos

Cómo hacer transparente el color de fondo de un div en CSS

Mi CSS no es CSS3 . Así que no puedo usar opacity o filter atributos. Sin utilizar estos atributos, ¿cómo puedo hacer que el background-color transparente de un div ? Debería ser como el ejemplo del cuadro de texto en este enlace . Aquí el color de fondo del cuadro de texto es transparente. Quiero hacer lo mismo, pero sin usar los atributos mencionados.

156voto

Jerska Puntos 3280

El problema con opacity es que también afectará al contenido, cuando a menudo no se quiere que esto ocurra.

Si sólo quieres que tu elemento sea transparente, es realmente tan fácil como :

background-color : transparent;

Pero si quieres que sea en colores, puedes usar:

background-color: rgba (255, 0, 0, 0.4);

O definir una imagen de fondo ( 1px por 1px ) guardado con el derecho alpha .
(Para ello, utilice Gimp , Paint.Net o cualquier otro software de imagen que permita hacerlo.
Sólo tienes que crear una nueva imagen, eliminar el fondo y poner un color semitransparente en ella, y luego guardarla en png).

Como dice René lo mejor sería mezclar ambos, con el rgba primero y el 1px por 1px como alternativa si el navegador no soporta alfa:

background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);

Ver también : http://www.w3schools.com/cssref/css_colors_legal.asp .

Demo : Mi JSFiddle

68voto

flem Puntos 12892

La opacidad le da translucidez o transparencia. Vea un ejemplo Toque aquí .

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";       /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

Nota: estas NO son propiedades de CSS3

Ver http://css-tricks.com/snippets/css/cross-browser-opacity/

6voto

user1147171 Puntos 160

transparente es el valor por defecto para color de fondo

http://www.w3schools.com/cssref/pr_background-color.asp

1voto

user3241848 Puntos 18

Puede que sea un poco tarde para la discusión, pero inevitablemente alguien se tropezará con este post como lo hice yo. Encontré la respuesta que buscaba y pensé en publicar mi propia versión. El siguiente JSfiddle incluye cómo poner capas de .PNG con transparencia. La mención de Jerska del atributo de transparencia para el CSS del div fue la solución: http://jsfiddle.net/jyef3fqr/

HTML:

   <button id="toggle-box">toggle</button>
   <div id="box" style="display:none;" ><img src="x"></div>
   <button id="toggle-box2">toggle</button>
   <div id="box2" style="display:none;"><img src="xx"></div>
   <button id="toggle-box3">toggle</button>
   <div id="box3" style="display:none;" ><img src="xxx"></div>

CSS:

#box {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:1;
}
#box2 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
      #box3 {
background-color: #ffffff;
height:400px;
width: 1200px;
position: absolute;
top:30px;
z-index:2;
background-color : transparent;
      }
 body {background-color:#c0c0c0; }

JS:

$('#toggle-box').click().toggle(function() {
$('#box').animate({ width: 'show' });
}, function() {
$('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
$('#box2').animate({ width: 'show' });
}, function() {
$('#box2').animate({ width: 'hide' });
});
$('#toggle-box3').click().toggle(function() {
$('#box3').animate({ width: 'show' });
 }, function() {
$('#box3').animate({ width: 'hide' });
});

Y mi inspiración original: http://jsfiddle.net/5g1zwLe3/ También utilicé paint.net para crear los PNG transparentes, o más bien los PNG con BG transparentes.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X