Beim Webdesign sind Hintergrundfarbe oder Hintergrundmuster sehr wichtige Elemente. Manchmal möchten Sie jedoch die Hintergrundfarbe oder das Hintergrundmuster transparent machen, damit andere Elemente durchscheinen können.
Implementierungsmethode
Es gibt viele Möglichkeiten, die Deckkraft des CSS-Hintergrunds zu implementieren:
Die Farbwerte im RGBA-Format enthalten vier Attribute: Rotwert (0-255), Grünwert (0-255), Blauwert (0-255) und Transparenz (0-1). Durch Festlegen der Transparenzeigenschaft können Sie die Hintergrundfarbe oder das Hintergrundmuster undurchsichtig machen.
Zum Beispiel:
Hintergrundfarbe: rgba(255, 255, 255, 0.5);
Diese Stilregel fügt der Seite einen weißen, durchscheinenden Hintergrund hinzu.
In CSS3 können wir das Opacity-Attribut verwenden, um die Transparenz eines Elements festzulegen. Diese Eigenschaft akzeptiert einen Wert zwischen 0 und 1, wobei der Standardwert 1 ist, was vollständige Deckkraft bedeutet. 0,5 entspricht einer Deckkraft von 50 %.
Zum Beispiel:
Hintergrundfarbe: Schwarz;
Deckkraft: 0,5;
Diese Stilregel fügt der Seite einen schwarzen, halbtransparenten Hintergrund hinzu.
Wir können die Eigenschaften „Hintergrundfarbe“ und „Hintergrundbild“ auch gleichzeitig verwenden, um eine Deckkraft des Hintergrunds zu erreichen. Bei dieser Methode muss das Bild zunächst in ein transparentes PNG-Bild verarbeitet werden.
Zum Beispiel:
Hintergrundfarbe: #000;
Hintergrundbild: url(images/transparent-background.png);
Diese Stilregel fügt der Seite ein schwarzes, durchscheinendes Hintergrundbild hinzu.
Anwendungsszenarien
Die Deckkraft des CSS-Hintergrunds ist eine sehr leistungsstarke Technik, mit der sich eine Vielzahl von Effekten erzielen lassen.
Wenn sich die Maus über einen Link oder eine Schaltfläche bewegt, müssen wir normalerweise ein Eingabeaufforderungsfeld öffnen. Dies kann durch die Verwendung eines durchsichtigen Hintergrunds erreicht werden.
For Beispiel:
.tooltip-Wrapper {
position: relative;
}
.tooltip {
position: absolute; top: 100%; left: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px; display: none;
}
.tooltip-Wrapper: Hover. Die Maus wird mit der Maus darüber bewegt. Wenn das .tooltip-wrapper-Element aktiviert ist, wird ein schwarzes, durchscheinendes Tooltip-Feld angezeigt.
Karusselldiagramm-Ein- und Ausblendeffekt.banner {
display: block;
}
.banner img {
position: relative;
}
.banner img.active {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out;
}
.banner .background
}Das style Die Regel fügt dem Karussell auf der Seite einen schwarzen, durchscheinenden Hintergrund sowie einen Fade-Effekt hinzu. ZusammenfassungDie Deckkraft des CSS-Hintergrunds ist eine sehr nützliche Technologie, mit der eine Vielzahl von Effekten erzielt werden können, z. B. schwebende Eingabeaufforderungsinformationen und Karussell-Fade-Effekte. Versuchen Sie diese Technik, wenn Sie eine Hintergrundfarbe oder ein Hintergrundmuster transparent machen müssen, damit andere Elemente durchscheinen können.
Das obige ist der detaillierte Inhalt vonSo machen Sie den Hintergrund in CSS undurchsichtig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
