So machen Sie den Hintergrund in CSS undurchsichtig

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:

1. Farbwerte im RGBA-Format verwenden

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.

2. Verwenden Sie das Opacity-Attribut

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.

3. Verwenden Sie die Eigenschaften „Hintergrundfarbe“ und „Hintergrundbild“

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.

1. Informationen zu Eingabeaufforderungen schweben 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 ist ein sehr beliebtes Webdesign-Element, und der Ein- und Ausblendeffekt ist einer der Grundeffekte, die mit einem Semi-Diagramm erzielt werden können -transparenter Hintergrund und das Opazitätsattribut.
2. Zum Beispiel:

.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 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!