suchen

Heim  >  Artikel  >  Web-Frontend  >  So reduzieren Sie die Hintergrundtransparenz in CSS

So reduzieren Sie die Hintergrundtransparenz in CSS

青灯夜游
青灯夜游Original
2022-01-20 13:47:165914Durchsuche

So reduzieren Sie die Hintergrundtransparenz in CSS: 1. Verwenden Sie das Opazitätsattribut, legen Sie einfach den „Opazitätswert: Transparenzwert“ fest. 2. Verwenden Sie das Filterattribut, legen Sie einfach den „Filter: Opazitätswert“ fest ;"-Stil für das Hintergrundelement Value);"-Stil ist ausreichend.

So reduzieren Sie die Hintergrundtransparenz in CSS

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS reduziert die Hintergrundtransparenz

Methode 1: Verwenden Sie das Opazitätsattribut

Opacity-Attribut, um den Transparenzgrad eines Elements festzulegen. Von 0,0 (vollständig transparent) bis 1,0 (vollständig undurchsichtig)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

So reduzieren Sie die Hintergrundtransparenz in CSS

Methode 2: Filterattribut verwenden

Das Filterattribut definiert den visuellen Effekt des Elements (z. B. Unschärfe und Sättigung).

opacity(%) kann die Transparenz des Bildes umwandeln. Der Wert definiert den Umfang der Konvertierung. Ein Wert von 0 % bedeutet vollständige Transparenz, ein Wert von 100 % bedeutet keine Veränderung des Bildes. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts, äquivalent zur Multiplikation der Anzahl der Bildbeispiele. Wenn der Wert nicht festgelegt ist, ist der Wert standardmäßig 1. Diese Funktion ist dem vorhandenen Opazitätsattribut sehr ähnlich, mit der Ausnahme, dass einige Browser über den Filter eine Hardwarebeschleunigung bereitstellen, um die Leistung zu verbessern. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
filter: opacity(0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

So reduzieren Sie die Hintergrundtransparenz in CSS

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo reduzieren Sie die Hintergrundtransparenz in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung: Fünf häufige CSS-Fehler, die vermieden werden müssen (Sammlung)Nächster Artikel：Zusammenfassung: Fünf häufige CSS-Fehler, die vermieden werden müssen (Sammlung)

In Verbindung stehende Artikel

Mehr sehen