Detaillierte Erklärung zur Verwendung von Filtereigenschaften in CSS3

Als ich kürzlich das Intranet-Portal änderte, stieß ich zufällig auf eine Stelle, an der ich Filter verwenden musste. Zuerst verwendete ich zwei Bilder. Wenn die Maus über den Hintergrund bewegt wurde, wurde ein Farbverlauf erzeugt und die Symbole wechselten. Nachdem die Symbole jedoch im Hintergrund konfiguriert wurden, konnten die Symbole nicht normal wechseln, wenn die Maus darüber bewegt wurde. Also dachte ich daran, den Filtereffekt zu verwenden, um das Problem zu lösen. So habe ich auch einige häufig verwendete Filtereffekte kennengelernt.

Filter verwenden:

Vorwort

Die Filtereigenschaft von CSS3 kann Bilder auf Webseiten auf ähnliche Weise wie Photoshop verarbeiten.

Browserunterstützung: Nur der IE-Browser unterstützt das Filterattribut nicht. Um mit niedrigeren Versionen von Safari und Google-Browser kompatibel zu sein, muss das Präfix -webkit- hinzugefügt werden.

Gemeinsame Eigenschaften

Verwenden Sie die Syntax:

Filter: keine | Unschärfe() | Helligkeit() | Kontrast() | Schlagschatten() | Graustufen() | Farbton-Drehung() | Invertieren() | Deckkraft() | Sättigung() | Sepia() | URL();

CSS-Filter können mehrere Filter gleichzeitig für dasselbe Element definieren, wie z. B. „Filter: Kontrast (150 %), Helligkeit (1,5). Die Effekte, die durch die Anwendung der Filter in unterschiedlicher Reihenfolge erzeugt werden, sind jedoch auch unterschiedlich.

Der Standardwert ist: initial

„erben“ bedeutet, vom übergeordneten Element zu erben.

Hinweis: Filter werden normalerweise als Prozentsätze (z. B. 75 %) ausgedrückt, können aber auch als Dezimalzahlen (z. B. 0,75) ausgedrückt werden.

Normal

Kein Filter hinzugefügt

<div Datenfilter="Bild-normal">
 <h2>normal</h2>
 <img src="1.jpg">
</div>

Graustufen

Konvertieren Sie das Bild in Graustufen. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 100 % konvertiert das Bild vollständig in Graustufen, und ein Wert von 0 % lässt das Bild unverändert. Wenn nicht festgelegt, beträgt der Standardwert 0. Sie können auch Dezimalzahlen zwischen 0 und 1 schreiben.

<div Datenfilter="Bild-Graustufen">
 <h2>Graustufen</h2>
 <img src="1.jpg">
</div>


//Der Wert ist eine Dezimalzahl zwischen 0 und 1, Graustufen (0) bedeutet das Originalbild; Graustufen (1) bedeutet, dass es vollständig grau wird;
[Datenfilter=Bild-Graustufen] img {
  Filter: Graustufen (50 %);
  -webkit-filter: Graustufen (50 %); /* Chrome, Safari, Opera */
}

sättigen

Wenn der Wert 0 ist, erfolgt die Anzeige in Schwarzweiß. Wenn der Wert 0,5 ist, ist die Sättigung halb so groß wie beim Originalbild. Wenn der Wert 1 ist, bedeutet dies, dass die Sättigung gleich der des Originalbilds ist. Ein Wert größer als 1 bedeutet, dass die Sättigung erhöht ist.

// (Wert ist eine Dezimalzahl zwischen 0-1)
<div Datenfilter="Bild-Sättigung">
 <h2>sättigen</h2>
 <img src="1.jpg">
</div>

Unter Sättigung versteht man die Konzentration (Reinheit) einer Farbe. Sättigung: Die Lebendigkeit und Tiefe der Farben im Bild;

[Datenfilter=Bildsättigung] img {
  Filter: sättigen (360 %);
  -webkit-filter:saturate(360%); /* Chrome, Safari, Opera */
}

Sepiabraun

0 bedeutet, dass der Braungrad 0 % beträgt und das Originalbild angezeigt wird, und 1 bedeutet, dass der Braungrad 100 % beträgt und Braun angezeigt wird.

<div Datenfilter="Bild-Sepia">
 <h2>Sepia</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bild-Sepia] img {
  Filter: Sepia (100 %);
  -webkit-filter: Sepia (100 %); /* Chrome, Safari, Opera */
}

umkehren

Invertieren Sie das Eingabebild. Der Wert definiert den Maßstab der Konvertierung. Ein Wert von 100 % stellt eine komplette Umkehrung dar. Ein Wert von 0 % bewirkt keine Veränderung am Bild. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren des Effekts. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 0.

<div Datenfilter="Bild invertieren">
 <h2>invertieren</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bild invertieren] img {
  Filter: invertieren (100 %);
  -webkit-filter: invertieren(100%); /* Chrome, Safari, Opera */
}

Opazität

Der Grad der Transparenz des Bildes. Ein Wert von 0 % ist völlig transparent und ein Wert von 100 % lässt das Bild unverändert. 0–100 % ist teilweise transparent. Sie können anstelle von % auch eine Dezimalzahl zwischen 0 und 1 verwenden. Dies ist der vorhandenen Opazitätseigenschaft sehr ähnlich, mit der Ausnahme, dass einige Browser eine Hardwarebeschleunigung durch Filter bereitstellen, um die Leistung zu verbessern.

<div Datenfilter="Bildopacity">
 <h2>Deckkraft</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bildopazität] img {
  Filter: Deckkraft (50 %);
  -webkit-filter: Deckkraft (50 %); /* Chrome, Safari, Opera */
}

Helligkeit

Machen Sie das Bild heller oder dunkler. Wenn der Wert 0 % beträgt, ist das Bild vollständig schwarz. Ein Wert von 100 % bewirkt keine Veränderung am Bild. Werte über 100 % machen das Bild heller als zuvor. Wenn kein Wert festgelegt ist, ist der Standardwert 1. Sie können entweder Prozentsätze oder Dezimalzahlen verwenden.

<div Datenfilter="Bildhelligkeit">
 <h2>Helligkeit</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bildhelligkeit] img {
  Filter: Helligkeit (120 %);
  -webkit-filter: Helligkeit (120 %); /* Chrome, Safari, Opera */
}

Kontrast

Passt den Kontrast des Bildes an. Bei einem Wert von 0 % wird das Bild vollkommen schwarz. Bei einem Wert von 100% bleibt das Bild unverändert. Werte über 100 % bedeuten, dass ein geringerer Kontrast verwendet wird. Wenn kein Wert festgelegt ist, ist der Standardwert 1. Sie können entweder Prozentsätze oder Dezimalzahlen verwenden. Kontrast ist die Definition des Helligkeits- und Dunkelheitsgrades in einem Bild. Der Kontrast bezieht sich auf das Maß an Hell und Dunkel im Bild.

<div Datenfilter="Bildkontrast">
 <h2>Kontrast</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bildkontrast] img {
  Filter: Kontrast (160 %);
  -webkit-filter:contrast(160%); /* Chrome, Safari, Opera */
}

Farbton-Rotation Farbtonrotation

Wendet eine Farbtonrotation auf das Bild an. Lassen Sie die Farben im Bild entsprechend im Farbkreis rotieren. Wenn der Wert 0 Grad beträgt, ändert sich das Bild nicht. Wenn der Wert nicht festgelegt ist, beträgt der Standardwert 0 Grad. Obwohl es für diesen Wert keinen Maximalwert gibt, entspricht ein Wert über 360 Grad einer zweiten Drehung.

<div Datenfilter="Bild-Farbton-Drehen">
 <h2>Farbton-Rotation</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Bild-Farbton-Drehen] img {
  Filter: Farbton-Drehung (160 Grad);
  -webkit-filter: Farbton-Rotate(160 Grad); /* Chrome, Safari, Opera */
}

verwischen

Wenden Sie eine Gaußsche Unschärfe auf das Bild an. Je größer der Wert, desto unschärfer ist es. Der Standardwert ist 0, was bedeutet, dass keine Unschärfe vorliegt.

<div Datenfilter="Bildunschärfe">
 <h2>Unschärfe</h2>
 <img src="1.jpg">
</div>


[Datenfilter=Bildunschärfe] img {
  Filter: Unschärfe (2px);
  -webkit-filter: Unschärfe (2px); /* Chrome, Safari, Opera */
}

Schlagschatten

Sehr ähnlich box-shadow -Eigenschaft. Der Unterschied besteht darin, dass einige Browser mit Filtern möglicherweise eine Hardwarebeschleunigung für eine bessere Leistung bereitstellen.

<div Datenfilter="Schlagschatten">
 <h2>Unschärfe</h2>
 <img src="1.jpg">
</div>

[Datenfilter=Schlagschatten] img {
  Filter: Schlagschatten (16px 16px 20px blau);
  -webkit-filter: Schlagschatten (16px 16px 20px blau); /* Chrome, Safari, Opera */
}

Vergleich mit Box-Shadow

Schatteneigenschaften hinzufügen.

<div Datenfilter="Boxschatten">
 <h2>Unschärfe</h2>
 <img src="1.jpg">
</div>

/* Schatteneffekt hinzufügen */
[Datenfilter=Boxschatten] img {
  Box-Shadow: 16px 16px 20px blau;
  -webkit-filter:box-shadow:16px 16px 20px blau; /* Chrome, Safari, Opera */
}

Es besteht ein Unterschied zwischen Box-Shadow und Drop-Shadow. In Bezug auf die Wirkung beschattet Box-Shadow das gesamte Bild, während Drop-Shadow nur den undurchsichtigen Teil beschattet.

mehrere Filtereffekte

<div Datenfilter="Mehrere Filter">
 <h2>Unschärfe</h2>
 <img src="1.jpg">
</div>

/*Helligkeit und Kontrast von Schaltflächen und Bildern anpassen*/
[Datenfilter=Mehrere Filter] img {
   Filter: Kontrast (175 %), Helligkeit (3 %);
   -webkit-filter: Kontrast (175 %), Helligkeit (3 %); /* Chrome, Safari, Opera */
}

Fusion-Effekt

/*Unschärfe mit Kontrast gemischt, um einen Fusionseffekt zu erzeugen*/
.filter-mix {
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Breite: 300px;
    Höhe: 200px;
    Filter: Kontrast (20);
    Hintergrund: #fff;
}
.filter-mix::vor {
    Inhalt: "";
    Position: absolut;
    Breite: 120px;
    Höhe: 120px;
    Randradius: 50 %;
    Hintergrund: #333;
    oben: 40px;
    links: 40px;
    Z-Index: 2;
    Filter: Unschärfe (6px);
    Box-Größe: Rahmenbox;
    Animation: FilterBallMove 4 s, unendliches Auslaufen;
}

.filter-mix::nach {
    Inhalt: "";
    Position: absolut;
    Breite: 80px;
    Höhe: 80px;
    Randradius: 50 %;
    Hintergrund: #3F51B5;
    oben: 60px;
    rechts: 40px;
    Z-Index: 2;
    Filter: Unschärfe (6px);
    Animation: FilterBallMove2, 4 s, unendliches Auslaufen;
}

@keyframes filterBallMove {
    50 % {
        links: 140px;
    }
}

@keyframes filterBallMove2 {
    50 % {
        rechts: 140px;
    }
}

Feuereffekt

Filter: contrast() wird in Verbindung mit filter: blur() und Animation verwendet, um den Flammeneffekt zu erzeugen.

Filter: Unschärfe (20px) Kontrast (30);

Animation: Bewegung 2 s unendlich 0,2 s linear;

SCSS-Filterstil

$filter: (
 Graustufen: ‚(50 %)‘, // Graustufen sättigen: ‚(360 %)‘, // Sättigung Sepia: ‚(100 %)‘, // Sepia invertieren: ‚(100 %)‘, // Deckkraft: ‚(50 %)‘, // Helligkeit: ‚(120 %)‘, // Kontrast: ‚(160 %)‘, // Farbton drehen: ‚(160 Grad)‘, // Unschärfe: ‚(2px)‘, // Schlagschatten: ‚Schlagschatten (16px 16px 20px blau)‘, // Schatten);

@each $Typ, $Wert in $Filter {
 [Datenfilter = "Bild-#{$Typ}"] {
  img {
       Filter: #{$type}#{$value};
  }
 }
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die detaillierte Verwendung von Filtereigenschaften in CSS3. Weitere relevante CSS3-Filterinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!