Verschiedene Möglichkeiten, den Aushöhlungseffekt der CSS3-Maskenebene zu erzielen

Dieser Artikel stellt 4 Methoden zum Erzielen einer Maskenebenenaushöhlung vor. Teilen Sie ihn mit allen und hinterlassen Sie eine Notiz für sich selbst. Die Einzelheiten lauten wie folgt:

Schauen wir uns zunächst die Wirkung an

【Methode 1: Implementierung der Screenshot-Simulation】

Prinzip: Zuerst ein Bild von der gleichen Position aufnehmen, eine Maskenebene erstellen und dann das Bild an der entsprechenden Stelle positionieren.

Vorteile: einfaches Prinzip; gute Kompatibilität, kompatibel mit IE6 und IE7; kann mehrere Elemente gleichzeitig aushöhlen.

Nachteile: Diese Methode ist nur für statische Seiten geeignet, nicht für scrollbare Seiten. Es ist außerdem nicht für Seiten geeignet, deren Inhalt sich ändert.

Der Code lautet wie folgt:

<div Klasse="Klasse1">
    <img src="images/000.jpg" alt=""/>
</div>

.Klasse1{
    Position: absolut;
    Breite: 100 %;
    Höhe: 100 %;
    oben: 0;
    links: 0;
    Hintergrundfarbe: #000;
    Deckkraft: 0,6;
    Filter: Alpha (Deckkraft = 60);
}
.class1 img{
    Position: absolut;
    oben: 260px;
    links: 208px;
}

【Methode 2: Implementierung der CSS3-Schatteneigenschaft】

Prinzip: Nutzen Sie die Schatteneigenschaft von CSS3.

Vorteile: Einfach umzusetzen, für jede Seite geeignet und nicht durch die Seite eingeschränkt.

Nachteile: Die Kompatibilität ist nicht sehr gut, nur mit IE9 kompatibel.

Der Code lautet wie folgt:

<div Klasse="Klasse2"></div>

.Klasse2{
    Position: absolut;
    Breite: 170px;
    Höhe: 190px;
    oben: 260px;
    links: 208px;
    Kastenschatten: rgba(0,0,0,.6) 0 0 0 100vh;
}

[Methode 3: Implementierung der CSS-Rahmeneigenschaft]

Grundsatz: Randeigenschaften nutzen. Dabei wird zunächst eine leere Box im Zielgebiet platziert und diese anschließend mit einem Rahmen drumherum aufgefüllt.

Vorteile: einfach zu implementieren, gute Kompatibilität, kompatibel mit IE6 und IE7; für jede Seite geeignet und nicht durch die Seite eingeschränkt.

Nachteile: Der Prozess zur Implementierung der Kompatibilität ist relativ kompliziert.

Der Code lautet wie folgt:

<div Klasse="Klasse3"></div>
.Klasse3{
      Position: absolut;
      Breite: 170px;
      Höhe: 190px;
      oben: 0;
      links: 0;
      Rahmenbreite links: 208px;
      Rahmen-links-Stil: durchgezogen;
      Rahmenfarbe links: RGBA (0,0,0, 0,6);
      Rahmenbreite rechts: 970px;
      Rahmen-rechts-Stil: durchgezogen;
      Rahmen rechts-Farbe: rgba(0,0,0,.6);
      Rahmenbreite oben: 260px;
      Rahmen-Oberteil-Stil: durchgezogen;
      Rahmenoberseite-Farbe: RGBA (0,0,0, 0,6);
      Rahmenbreite unten: 253px;
      Rahmen-unten-Stil: durchgezogen;
      Rahmen unten Farbe: RGBA (0,0,0, 0,6);
}

【Methode 4: SVG oder Leinwand】

Prinzip: Nutzen Sie die Zeichenfunktion von SVG oder Canvas.

Vorteile: Es können mehrere gleichzeitig ausgehöhlt werden.

Nachteile: schlechte Kompatibilität und relativ komplizierter Implementierungsprozess.

Ich nehme SVG als Beispiel, der Code lautet wie folgt:

<svg style="position: absolute;" width="1366" height="700">
    <Definitionen>
        <mask id="meineMaske">
            <rect x="0" y="0" width="100%" height="100%" style="stroke:none; fill: #ccc"></rect>
            <rect id="circle1" width="170" height="190" x='208' y="260" style="fill: #000" />
        </Maske>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="strich: keiner; füllung: rgba(0, 0, 0, 0,6); maske: url(#meineMaske)"></rect>
</svg>

Damit ist dieser Artikel über verschiedene Möglichkeiten zum Erzielen des CSS3-Maskenebenen-Aushöhlungseffekts abgeschlossen. Weitere relevante Inhalte zur CSS3-Maskenebenen-Aushöhlung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!