webentwicklung-frage-antwort-db.com.de

Transparente CSS-Hintergrundfarbe

Ich möchte das Listenmenü ausblenden, indem ich die Deckkraft verwende, ohne die Schriftart zu beeinflussen. Ist das mit CSS3 möglich?

68
Saranya

jetzt können Sie rgba in CSS-Eigenschaften wie folgt 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/

101
Rohit Azad

Behalte diese drei Optionen im Hinterkopf (du willst # 3):

1) Ganzes Element ist transparent:

visibility: hidden;

2) Das gesamte Element ist etwas transparent:

opacity: 0.0 - 1.0;

3) Nur das Hintergrund des Elements ist transparent:

background-color: transparent;
36
jordanb

ja das ist möglich benutze einfach die rgba-syntax für deine hintergrundfarbe.

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

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

8
dasdasdasdasd

Hier ist eine Beispielklasse mit CSS namens colors:

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

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

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

Um dies zu umgehen, verwenden Sie die Methoden rgba oder hsla, um Transparenz als Teil Ihrer gewünschten Hintergrund- "Farbe" anzugeben. Auf diese Weise können Sie die Hintergrundtransparenz unabhängig von der Transparenz der anderen Elemente in Ihrem Element festlegen.

Es gibt drei Möglichkeiten, einen blauen Hintergrund mit einer Transparenz von 75% 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)
7
SherylHohman

Versuche dies:

   opacity:0;


Für IE8 und früher

filter:Alpha(opacity=0); 

Opacity Demo von W3Schools

4
Vinod