Heim > Artikel > Web-Frontend > So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3
So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3
- WBOYOriginal
- 2021-12-15 17:36:033180Durchsuche
Sie können das Filterattribut und die Funktion „brightness()“ in CSS verwenden, um eine Anzeige mit geringer Helligkeit zu erreichen. Das Filterattribut wird verwendet, um den visuellen Effekt von Bildelementen zu definieren Stil des Elements. Die Syntax „element {filter:brightness“ (heller und dunkler Wert)}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erreichen Sie eine niedrige Helligkeit in CSS3
Wenn Sie in CSS eine niedrige Helligkeit erreichen möchten, können Sie das Filterattribut verwenden. Das
filter-Attribut definiert den visuellen Effekt (z. B. Unschärfe und Sättigung) des Elements (normalerweise ). Die Funktion
brightness() wendet eine lineare Multiplikation auf das Bild an, wodurch es heller oder dunkler erscheint. Bei einem Wert von 0 % ist das Bild komplett schwarz. Wenn der Wert 100 % beträgt, erfolgt keine Änderung am Bild. Andere Werte entsprechen linearen Multiplikatoreffekten. Werte über 100 % sind in Ordnung und das Bild wird heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<style>
.img1{
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Ausgabeergebnis: 
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!