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

Detaillierte Erklärung zur Verwendung von ES6 Promise

Inhaltsverzeichnis Was ist ein Versprechen? Verwe...

Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

Kürzlich stieß ich während des Entwicklungsprozes...

JavaScript-Implementierung der Dropdown-Liste

In diesem Artikelbeispiel wird der spezifische Ja...

Detaillierte Analyse der MySQL-Sperrblockierung

Bei der täglichen Wartung werden Threads häufig b...

Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

1. Download von der offiziellen Website: https://...

React Native JSI implementiert Beispielcode für RN und native Kommunikation

Inhaltsverzeichnis Was ist JSI Was ist anders an ...

MySQL-Sortierung – Chinesische Details und Beispiele

Detaillierte Erklärung zur MySQL-Sortierung chine...

Detaillierte Erläuterung des Linux-Befehls zur Änderung des Hostnamens

Linux-Befehl zum Ändern des Hostnamens 1. Wenn Si...

Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung

Vorwort Bei der Linux-Kernel-Programmierung werde...

Lösung für das Problem, dass der externe Verifizierungslastenausgleich von Docker Swarm nicht wirksam wird

Problembeschreibung Ich habe drei virtuelle Masch...

Lösen Sie das Matching-Problem in CSS

Problembeschreibung Wie wir alle wissen, wird bei...

Tutorial-Diagramm zur Konfiguration der Tomcat-Umgebungsvariablen unter Win10

Vor der Konfiguration müssen wir Folgendes tun: 1...

Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS

px (Pixel) Ich glaube, jeder ist mit dem Begriff ...

Beispiel für die Implementierung des Ziehens von Zeilen und Spalten in einer Elementtabelle

Das Element UI-Tabelle verfügt nicht über eine in...

Grafisches Tutorial zur Installation der MySQL 8.0.13-Dekomprimierungsversion unter Windows

In diesem Artikel finden Sie das grafische Tutori...