Couleur d'arrière-plan CSS transparente

Je veux faire disparaître l'arrière-plan du menu de la liste en utilisant l'opacité, sans affecter la police. Est-ce possible avec CSS3?

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 , changez 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/

Gardez ces trois options à l'esprit (vous voulez # 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 l' arrière - plan de l'élément est transparent:

background-color: transparent;

oui, c'est possible. utilisez simplement la syntaxe rgba pour votre couleur d'arrière-plan.

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

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

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

Cela ajoute un arrière-plan à 25% opaque (coloré) et à 75% transparent.

CAVEAT Malheureusement, l'opacité affectera tout l' élément auquel elle est attachée.
Donc, si vous avez du texte dans cet élément, il définira également le texte à 25% d'opacité. :-(

Pour contourner ce problème, utilisez les méthodes rgbaou hslapour indiquer la transparence dans le cadre de 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 3 façons de définir un fond 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)

Dans ce cas, background-color:rgba(0,0,0,0.5);c'est le meilleur moyen. Par exemple:background-color:rgba(0,0,0,opacity option);

Pour y parvenir, vous devez modifier le background-colorde l'élément.

Façons de créer une couleur (semi) transparente:

• Le nom de la couleur CSS transparentcrée une couleur complètement transparente.

  Usage:

    .transparent{
      background-color: transparent;
    }
  

• Utilisation des fonctions rgbaou de hslacouleur, qui vous permettent d'ajouter le canal alpha (opacité) aux fonctions rgbet hsl. Leurs valeurs alpha vont de 0 à 1.

  Usage:

    .semi-transparent-yellow{
      background-color: rgba(255, 255, 0, 0.5);
    }
    .transparent{
      background-color:  hsla(0, 0%, 0%, 0);
    }
  

• Outre les solutions déjà mentionnées, vous pouvez également utiliser le format HEX avec valeur alpha ( #RRGGBBAAou #RGBAnotation ).

  C'est assez nouveau (contenu par CSS Color Module Level 4), mais déjà implémenté dans des navigateurs plus grands (désolé, pas d'IE).

  Cela diffère des autres solutions, car cela traite également le canal alpha (opacité) comme une valeur hexadécimale, ce qui le rend compris entre 0 et 255 ( FF).

  Usage:

    .semi-transparent-yellow{
      background-color: #FFFF0080;
    }
    .transparent{
      background-color: #0000;
    }
  

Vous pouvez également les essayer:

• transparent:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: transparent;
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `transparent`
</div>

• rgba():

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: rgba(0, 255, 0, 0.3);
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `rgba()`
</div>

• #RRGGBBAA:

div {
  position: absolute;
  top: 50px;
  left: 100px;
  height: 100px;
  width: 200px;
  text-align: center;
  line-height: 100px;
  border: 1px dashed grey;
  
  background-color: #FF000060
}

<img src="https://via.placeholder.com/200x100">
<div>
  Using `#RRGGBBAA`
</div>

Essaye ça:

opacity:0;

Pour IE8 et versions antérieures

filter:Alpha(opacity=0); 

Démo d'opacité de W3Schools

Oui, vous pouvez simplement du texte brut comme

.someDive{
    background:transparent 
}