Transparente CSS-Hintergrundfarbe

Ich möchte den Hintergrund des Listenmenüs mithilfe der Deckkraft verschwinden lassen, ohne die Schriftart zu beeinflussen. Ist das mit CSS3 möglich?

Jetzt können Sie rgba in folgenden CSS-Eigenschaften verwenden:

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

0,5 ist die Transparenz , ändern Sie die Werte entsprechend Ihrem Design.

Live-Demo http://jsfiddle.net/EeAaB/

Weitere Informationen http://css-tricks.com/rgba-browser-support/

Beachten Sie diese drei Optionen (Sie möchten # 3):

1) Das gesamte Element ist transparent:

visibility: hidden;

2) Das gesamte Element ist etwas transparent:

opacity: 0.0 - 1.0;

3) Nur der Hintergrund des Elements ist transparent:

background-color: transparent;

ja das ist möglich Verwenden Sie einfach die rgba-Syntax für Ihre Hintergrundfarbe.

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

Hier ist eine Beispielklasse mit CSS-Farben:

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

Dies fügt einen Hintergrund hinzu, der zu 25% undurchsichtig (farbig) und zu 75% transparent ist.

CAVEAT Leider wirkt sich die Deckkraft auf das gesamte Element aus, an das sie angehängt ist.
Wenn Sie also Text in diesem Element haben, wird der Text ebenfalls auf 25% Deckkraft eingestellt. :-(

Der Weg, dies zu überwinden, besteht darin, die Methoden rgbaoder zu hslaverwenden, um Transparenz als Teil Ihrer gewünschten Hintergrundfarbe anzuzeigen. Auf diese Weise können Sie die Hintergrundtransparenz unabhängig von der Transparenz der anderen Elemente in Ihrem Element festlegen.

Hier sind 3 Möglichkeiten, um einen blauen Hintergrund bei 75% Transparenz festzulegen, ohne andere Elemente zu beeinflussen:

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

In diesem Fall background-color:rgba(0,0,0,0.5);ist der beste Weg. Zum Beispiel:background-color:rgba(0,0,0,opacity option);

Um dies zu erreichen, müssen Sie background-colordas Element ändern .

Möglichkeiten, eine (halb-) transparente Farbe zu erstellen:

• Der CSS-Farbname transparenterzeugt eine vollständig transparente Farbe.

  Verwendung:

    .transparent{
      background-color: transparent;
    }
  

• Verwenden von rgbaoder hslaFarbfunktionen, mit denen Sie den Alpha-Kanal (Deckkraft) zu den Funktionen rgbund hinzufügen hslkönnen. Ihre Alpha-Werte reichen von 0 bis 1.

  Verwendung:

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

• Neben den bereits erwähnten Lösungen können Sie auch das HEX-Format mit Alpha-Wert ( #RRGGBBAAoder #RGBANotation ) verwenden.

  Das ist ziemlich neu (in CSS Color Module Level 4 enthalten), aber bereits in größeren Browsern implementiert (sorry, kein IE).

  Dies unterscheidet sich von den anderen Lösungen, da hierbei der Alphakanal (Deckkraft) ebenfalls als Hexadezimalwert behandelt wird, sodass er zwischen 0 und 255 liegt ( FF).

  Verwendung:

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

Sie können sie auch ausprobieren:

• 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>

Versuche dies:

opacity:0;

Für IE8 und früher

filter:Alpha(opacity=0); 

Deckkraft-Demo von W3Schools

Ja, Sie können einfach nur Text als

.someDive{
    background:transparent 
}