web-dev-qa-db-fra.com

Couleur de fond CSS transparente

Je veux faire disparaître le menu de la liste en utilisant l'opacité sans affecter la police. Est-ce possible avec CSS3?

htmlcssopacitycss-transitions
68
Saranya

maintenant vous pouvez utiliser rgba dans les propriétés CSS comme ceci:

.class{
    background: rgba(0,0,0,0.5);
}

0.5 est la transparence , modifiez les valeurs en fonction de votre conception.

Démo en direct http://jsfiddle.net/EeAaB/

plus d'infos http://css-tricks.com/rgba-browser-support/

101
Rohit Azad

Gardez ces trois options à l’esprit (vous voulez le n ° 3):

1) L'élément entier est transparent:

visibility: hidden;

2) L'élément entier est quelque peu transparent:

opacity: 0.0 - 1.0;

3) Seul le background de l'élément est transparent:

background-color: transparent;
36
jordanb

oui, c'est possible. utilisez simplement rgba-syntax pour la couleur de fond.

.menue{
  background-color: rgba(255, 0, 0, 0.5); //semi-transparent red
}
12
oezi

Dans ce cas, background-color:rgba(0,0,0,0.5); est la meilleure solution. Par exemple: background-color:rgba(0,0,0,opacity option);

8
dasdasdasdasd

Voici un exemple de classe utilisant les couleurs CSS nommées:

.semi-transparent {
  background: yellow;
  opacity: 0.25;
}

Cela ajoute un fond opaque à 25% (coloré) et transparent à 75%.

MISE EN GARDE Malheureusement, l'opacité affectera alors tout l'élément auquel il est attaché.
Donc, si vous avez du texte dans cet élément, le texte sera également réglé sur une opacité de 25%. :-(

La solution consiste à utiliser les méthodes rgba ou hsla pour indiquer la transparence dans la "couleur" d’arrière-plan souhaitée. Cela vous permet de spécifier la transparence de l'arrière-plan, indépendamment de la transparence des autres éléments de votre élément.

Voici trois manières de définir un arrière-plan bleu à 75% de transparence, sans affecter les autres éléments:

  • background: rgba(0%, 0%, 100%, 0.75)
  • background: rgba(0, 0, 255, 0.75)
  • background: hsla(240, 100%, 50%, 0.75)
7
SherylHohman

Essaye ça:

   opacity:0;


Pour IE8 et les versions antérieures

filter:Alpha(opacity=0);

Démo d'opacité de W3Schools

4
Vinod