Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS

Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS

Inhalt dieses Artikels: Seitenhohlmaskenebene, Seitenhohlmaskenführungsebene, Bildhohlmaske

Normale Maskenebene

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Minimalmaßstab=1, Benutzerskalierung=nein">
    <title>Titel</title>
    <Stil>
        .Maske{
   Position: absolut;
   Breite: 100 %;
   Höhe: 100%;
   oben: 0;
   links: 0;
   Hintergrund: rgba(0,0,0,0,4);
   Anzeige: Flex;
   Inhalt ausrichten: zentriert;
   Elemente ausrichten: zentrieren;
   Z-Index: 3;
  }
  .Maske{
   Position: fest;
      oben: 0;
      links: 0;
      unten: 0;
      rechts: 0;
      Hintergrund: rgba (0,0,0,.5); 
      /*Hintergrund:hsla(0,100%,80%,0,5)*/
      /*Hintergrund:#000; Deckkraft:0,5; */
  }
  //Unschärfeeffekt Milchglaseffekt.Unschärfe{
   -webkit-filter: Unschärfe (5px); /* Chrome, Opera */
   -moz-filter:unschärfe(5px);
   -ms-filter:unschärfe(5px);    
   Filter: Unschärfe (5px);
  }
</Stil>
</Kopf>
<Stil>

</Stil>
<Text>

<div Klasse='Maske'></div>

</body>
</html>

Die Wirkung der Hohlmaskenschicht ist in der Abbildung dargestellt

Verwenden Sie Box-Shadow, um einen Hohlmasken-Führungsebeneneffekt zu erzielen

Vorteil:

  • Abgerundete Ecken sind problemlos realisierbar;
  • Box-Shadow hat keinen Einfluss auf die Position des Elements und die Positionierung muss nur entsprechend der Position des Inhalts geschrieben werden.

Nachteile: Der sichtbare Schattenbereich kann das Klickereignis nicht auslösen. Wenn Sie also auf einen beliebigen Bereich der Maske klicken, kann dieser nicht ausgeblendet werden.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Minimalmaßstab=1, Benutzerskalierung=nein">
    <title>Titel</title>
    <Stil>
        .Führung{
      Position: absolut;
      Z-Index: 2;

   oben: 0px;
      links: 50%;
      transformieren: übersetzenX(-50%);
      
      Breite: 50px;
      Höhe: 50px;
      Rahmenradius: 50px;
      Rand: 3px durchgezogen #2353FA;
      
      Kastenschatten: 0px 0px 0px 1000px rgba (0,0,0, 0,75);
      Box-Größe: Rahmenbox;
    }
    </Stil>
</Kopf>
<Stil>
</Stil>
<Text>
<div Klasse='Anleitung'></div>
</body>
</html>

Verwenden Sie einen Rand, um einen Hohlmasken-Führungsebeneneffekt zu erzielen

Nachteile: Große Menge an Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1, Minimalmaßstab=1, Benutzerskalierung=nein">
    <title>Titel</title>
    <Stil>
     .Führung{
      Position: absolut;
      Z-Index: 2;
      .opacityEle{
        Rand: 700px durchgezogener RGBA (0,0,0,0,75);
        Breite: 50px;
        Höhe: 50px;
        Position: relativ;
        oben: -700px;
        links: -538px;
        Randradius: 50 %;
        .ele{
          Breite: 50px;
          Höhe: 50px;
          Rand: 3px durchgezogen #0B6EFF;
          Rahmenradius: 25px;
          Box-Größe: Rahmenbox;
        }
      }
    }
    </Stil>
</Kopf>
<Stil>

</Stil>
<Text>

<div Klasse='Anleitung'>
 <div Klasse='opacityEle'>
  <div Klasse = "ele"></div>
 </div>
</div>
</body>
</html>

Damit ist dieser Artikel über den Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS abgeschlossen. Weitere Informationen zu CSS-Hohlmaskenebenen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Perfekte Lösung für asynchrone Timeout-Vorgänge im JavaScript-Frontend

>>:  So lösen Sie das Problem, dass absolut positionierte Elemente in IE6/7 auf mysteriöse Weise verschwinden oder blockiert werden

Artikel empfehlen

Anwendungsbeispiele für React Hooks (6 gängige Hooks)

1. useState: Funktionskomponenten Status geben An...

Verwenden von JS zum Implementieren von Beispielcode für den Algorithmus zur binären Baumdurchquerung

Inhaltsverzeichnis Vorwort 1. Binärer Baum 1.1. D...

Detaillierte Erläuterung des dynamischen Zeitbereichsgrenzfalls im Vue el-date-picker

Es gibt zwei Situationen 1. Startzeit und Endzeit...

Führen Sie die Schritte aus, um mit Samba Ordner in CentOS 7 freizugeben

Vorwort Samba ist eine kostenlose Software, die d...

So benennen Sie unter Linux eine Gruppe von Dateien auf einmal um

Unter Linux verwenden wir normalerweise den Befeh...

Lösung für das zu langsame Herunterladen des Docker-Images

Der Download des Docker-Images hängt oder ist zu ...

JS implementiert das Lehrplan-Stundenplan-Applet (imitiert den Super-Lehrplan) und fügt eine benutzerdefinierte Hintergrundfunktion hinzu

Überblick: Ich habe aus mehreren auf dem Markt er...

20 hervorragende Beispiele für die Farbabstimmung auf ausländischen Webseiten

In diesem Artikel werden 20 hervorragende Beispiel...

So aktivieren Sie den Fernzugriff in Docker

Docker-Daemon-Socket Der Docker-Daemon kann über ...

Ein Designer beschwert sich erneut über die offizielle Website von Hammer

Letztes Jahr war der offene Brief ein großer Erfo...

Beispiel für die Verwendung von CSS3 zum Anpassen des Stils eines Eingabe-Mehrfachauswahlfelds

Prinzip: Blenden Sie zuerst das Eingabeelement au...

Verwenden Sie MySQL, um Port 3306 zu öffnen/ändern und Zugriffsberechtigungen in der Ubuntu/Linux-Umgebung zu öffnen

Betriebssystem: Ubuntu 17.04 64-Bit MySQL-Version...

jQuery kombiniert mit CSS, um die Funktion „Zurück zum Anfang“ zu erreichen

CSS-Operationen CSS $("").css(name|pro|...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

Warum erscheinen ausgewählte @@session.tx_read_only in großen Mengen in der Datenbank?

Finden Sie das Problem Beim Abrufen der wichtigst...