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

191

No estoy usando CSS3. Entonces no puedo usar opacityo filteratributos. Sin usar estos atributos, ¿cómo puedo hacer background-colortransparente a div? Debería ser una especie de ejemplo de 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 anteriormente.

Mistu4u
fuente
3
Ni opacitytampoco filterson los atributos CSS 3. ¿Por qué crees que no puedes usarlos?
Pekka
No sé, en mi Eclipse Juno no se muestran los atributos y según W3School: Nota: La propiedad de opacidad CSS es parte de la recomendación W3C CSS3. Ver aquí
Mistu4u
¡Y mi eclipse no admite (muy probablemente) CSS3! :(
Mistu4u
1
Yo diría que puedes ignorar esos mensajes. Algunos atributos están fuera de las especificaciones pero aún se pueden usar en el mundo real. Una combinación de opacity, filtery algunos otros atributos como se muestra aquí: css-tricks.com/css-transparency-settings-for-all-broswers cubrirán prácticamente todos los navegadores no es
Pekka

Respuestas:

140

La opacidad te brinda translucidez o transparencia. Vea un ejemplo de 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: estas NO son propiedades CSS3

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

Paul Fleming
fuente
1
"Así que no puedo usar opacidad o atributos de filtro"
Jerska
44
@Jerska, esa es una premisa que necesita ser cuestionada. Su única razón para no usar esos atributos parece ser que su IDE se queja de ellos
Pekka
Entonces, ¿hay alguna otra manera de lograr eso?
Mistu4u
@Subir si necesita otra forma, vea la respuesta de Jerska. Pero como se dijo, parece cuestionable por qué quieres evitar opacityen primer lugar.
Pekka
11
El póster quería un fondo opaco, no un elemento opaco. El texto en el elemento también será opaco usando el método de opacidad. Esta respuesta no es lo suficientemente completa como para proporcionar eso. Usar rgba con un png alternativo sería mucho mejor.
René
351

El problema opacityes que también afectará el contenido, cuando a menudo no desea que esto suceda.

Si solo desea que su 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 ( 1pxpor 1px) guardada con la derecha alpha.
(Para ello, el uso Gimp, Paint.Neto cualquier otro software de imagen que le permite hacer eso.
Basta con crear una nueva imagen, eliminar el fondo y poner un color semitransparente en él, a continuación, guardarlo en PNG).

Según lo dicho por René , lo mejor que puede hacer sería mezclar ambos, con el rgbaprimero y el 1pxde 1pxla imagen como una alternativa en caso de que 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 .

Demostración : My JSFiddle

Jerska
fuente
3
También escrito como comentario en otra respuesta. Lo mejor sería usar el colorante rgba y el png descrito en esta respuesta como reserva.
René
2
Maldad en la simplicidad de usar 'transparente' en el atributo de color de fondo. Mega felicitaciones!
tfont
4

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 */
randominstanceOfLivingThing
fuente
2

Puede que sea 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 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.

usuario3241848
fuente
1
    /*Fully Opaque*/
    .class-name {
      opacity:1.0;
    }

    /*Translucent*/
    .class-name {
      opacity:0.5;
    }

    /*Transparent*/
    .class-name {
      opacity:0;
    }

    /*or you can use a transparent rgba value like this*/
    .class-name{
      background-color: rgba(255, 242, 0, 0.7);
      }

    /*Note - Opacity value can be anything between 0 to 1;
    Eg(0.1,0.8)etc */
ARVIND CHAUHAN
fuente
Proporcione alguna explicación para su respuesta y evite publicar solo respuestas de código.
Saeed Zhiany