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?
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/
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;
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
}
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);
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)