transparencia - opacidad imagen de fondo css
Cómo hacer que el color de fondo div sea transparente en CSS (5)
No estoy usando CSS3. Entonces no puedo usar opacity o atributos de filter . Sin usar estos atributos, ¿cómo puedo hacer que el background-color transparente de un div ? Debería ser una especie de ejemplo de cuadro de texto en este link . Aquí el color de fondo del cuadro de texto es transparente. Quiero hacer lo mismo, pero sin usar los atributos mencionados anteriormente.
Desde https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
Para establecer el color de fondo:
/* Hexadecimal value with color and 100% transparency*/
background-color: #11ffee00; /* Fully transparent */
/* Special keyword values */
background-color: transparent;
/* HSL value with color and 100% transparency*/
background-color: hsla(50, 33%, 25%, 1.00); /* 100% transparent */
/* RGB value with color and 100% transparency*/
background-color: rgba(117, 190, 218, 1.0); /* 100% transparent */
El problema con la opacity es que también afectará el contenido, cuando a menudo no quiere que esto suceda.
Si solo quieres que tu elemento sea transparente, es realmente tan fácil como:
background-color: transparent;
Pero si quieres que esté en colores, puedes usar:
background-color: rgba(255, 0, 0, 0.4);
O defina una imagen de fondo ( 1px por 1px ) guardada con el alpha correcto.
(Para hacerlo, use Gimp , Paint.Net o cualquier otro software de imágenes que le permita hacer eso).
Simplemente cree una nueva imagen, elimine el fondo y coloque un color semitransparente, luego guárdelo en png).
Como dijo René , lo mejor sería mezclar ambos, con el rgba primero y la imagen de 1px por 1px como una alternativa si el navegador no admite 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 .
Demostración : Mi JSFiddle
La opacidad te brinda translucidez o transparencia. Vea un ejemplo Fiddle 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: here
Ver http://css-tricks.com/snippets/css/cross-browser-opacity/
Puede ser un poco tarde para la discusión, pero inevitablemente alguien tropezará con esta publicación como lo hice yo. Encontré la respuesta que estaba buscando y pensé en publicar mi propia opinión. El siguiente JSfiddle incluye cómo superponer .PNG''s 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 usé paint.net para crear los PNG transparentes, o más bien los PNG con BG transparentes.
transparente es el predeterminado para color de fondo