Comment rendre la couleur d'arrière-plan d'un div transparent en CSS

Question

Je n'utilise pas CSS3. Je ne peux donc pas utiliser opacity o filter attributs. Sans utiliser ces attributs, comment puis-je faire en sorte que le background-color transparent d'un div ? Cela devrait ressembler à l'exemple de la zone de texte dans ce document. link . Ici, la couleur de fond de la zone de texte est transparente. Je veux faire la même chose, mais sans utiliser les attributs mentionnés ci-dessus.

Answer 1

Le problème avec opacity est que cela affectera également le contenu, alors que souvent vous ne voulez pas que cela se produise.

Si vous voulez simplement que votre élément soit transparent, c'est vraiment aussi simple que :

background-color: transparent;

Mais si vous voulez qu'il soit en couleurs, vous pouvez utiliser :

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

Ou définir une image de fond ( 1px par 1px ) enregistré avec le droit alpha .
(Pour ce faire, utilisez Gimp , Paint.Net ou tout autre logiciel d'image qui vous permet de le faire.
Il suffit de créer une nouvelle image, de supprimer le fond et d'y mettre une couleur semi-transparente, puis de l'enregistrer en png).

Comme l'a dit René la meilleure chose à faire serait de mélanger les deux, avec le rgba d'abord et le 1px par 1px comme solution de rechange si le navigateur ne prend pas en charge l'image alpha :

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

Voir aussi : http://www.w3schools.com/cssref/css_colors_legal.asp .

Démo : Mon JSFiddle

Answer 2

L'opacité vous donne la translucidité ou la transparence. Voir un exemple Le violon ici .

-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 */

Note : ce ne sont PAS des propriétés CSS3

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

Answer 3

transparent est la valeur par défaut pour couleur de fond

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

Answer 4

Desde https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

Pour définir la couleur de fond :

/* 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 */

Answer 5

La discussion est peut-être un peu tardive, mais il est inévitable que quelqu'un tombe sur cet article comme je l'ai fait. J'ai trouvé la réponse que je cherchais et j'ai pensé poster mon propre point de vue sur le sujet. Le JSfiddle suivant explique comment superposer des fichiers .PNG avec transparence. La mention par Jerska de l'attribut de transparence pour le CSS de la division a été la solution : 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' });
});

Et mon inspiration originale : http://jsfiddle.net/5g1zwLe3/ J'ai également utilisé paint.net pour créer les PNG transparents, ou plutôt les PNG avec des BG transparents.