Comment rendre la couleur de fond div transparente en CSS


191

Je n'utilise pas CSS3. Je ne peux donc pas utiliser opacityni filterattributs. Sans utiliser ces attributs, comment puis-je rendre background-colortransparent un div? Cela devrait être une sorte d'exemple de zone de texte dans ce lien . Ici, la couleur d'arrière-plan de la zone de texte est transparente. Je veux faire la même chose, mais sans utiliser les attributs mentionnés ci-dessus.


3
Ni opacityne filtersont CSS 3 attributs. Pourquoi pensez-vous que vous ne pouvez pas les utiliser?
Pekka

Je ne sais pas, dans mon Eclipse Juno, les deux attributs ne sont pas affichés et selon W3School: Remarque: la propriété d'opacité CSS fait partie de la recommandation CSS3 du W3C. Voir ici
Mistu4u

Et My eclipse ne supporte pas (très probablement) CSS3 !! :(
Mistu4u

1
Je dirais que vous pouvez ignorer ces messages. Certains attributs sont en dehors des spécifications mais toujours utilisables dans le monde réel. Une combinaison de opacity, filteret quelques autres attributs comme indiqué ici: css-tricks.com/css-transparency-settings-for-all-broswers couvrira à peu près tous les navigateurs disponibles
Pekka

Réponses:


140

L'opacité vous donne de la translucidité ou de la transparence. Voir un exemple de 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 */

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

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


1
"Je ne peux donc pas utiliser d'opacité ni d'attributs de filtre"
Jerska

4
@Jerska, c'est une prémisse qui doit être remise en question. Sa seule raison de ne pas utiliser ces attributs semble être que son IDE se plaint d'eux
Pekka

Alors, y a-t-il un autre moyen d'y parvenir?
Mistu4u

@Subir si vous avez besoin d'un autre moyen, voyez la réponse de Jerska. Mais comme dit, il semble douteux pourquoi vous voulez éviter opacityen premier lieu.
Pekka

11
L'affiche voulait un fond opaque, pas un élément opaque. Le texte de l'élément sera également opaque en utilisant la méthode d'opacité. Cette réponse n'est pas assez complète pour fournir cela. Utiliser rgba avec un png de secours serait bien mieux.
René

353

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

Si vous voulez juste 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éfinissez une image de fond ( 1pxpar 1px) enregistrée avec la droite alpha.
(Pour ce faire, l' utilisation Gimp, Paint.Netou tout autre logiciel d'image qui vous permet de le faire. Il
suffit de créer une nouvelle image, supprimer l'arrière - plan et de mettre une couleur semi-transparente, puis conservez - le dans .png.)

Comme l'a dit René , la meilleure chose à faire serait de mélanger les deux, avec la rgbapremière et la 1pxpar 1pximage comme solution de secours si le navigateur ne prend pas en charge alpha:

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

Voir également : http://www.w3schools.com/cssref/css_colors_legal.asp .

Démo : My JSFiddle


3
Également tapé comme commentaire à une autre réponse. Le plus gentil serait d'utiliser la coloration rgba et le png décrit dans cette réponse comme solution de secours.
René

2
Méchanceté sur la simplicité d'utilisation de «transparent» sur l'attribut de couleur d'arrière-plan. Méga bravo!
tfont


4

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

Pour définir la couleur d'arrière-plan:

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

2

Il est peut-être un peu tard pour la discussion mais inévitablement quelqu'un tombera sur ce post comme je l'ai fait. J'ai trouvé la réponse que je cherchais et j'ai pensé publier ma propre opinion. 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 div était 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 aussi utilisé paint.net pour créer les PNG transparents, ou plutôt les PNG avec des BG transparents.


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

Veuillez expliquer votre réponse et évitez de publier des réponses à code uniquement.
Saeed Zhiany
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.