So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3-CSS-Tutorial-php.cn

So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3

WBOY

Freigeben： 2021-12-15 17:36:03

Original

3213 Leute haben es durchsucht

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)}“.

So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3

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 So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3 ). 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>

Nach dem Login kopieren

Ausgabeergebnis:
So erreichen Sie eine Anzeige mit geringer Helligkeit in CSS3

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