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

Eine kurze Einführung in die Gesamtstruktur von Tomcat

Tomcat ist weithin als Webcontainer bekannt. Es h...

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

In diesem Artikelbeispiel wird der spezifische Co...

Ohne zu viel Code können Sie Hyperlinks verwenden, um einfache und schöne benutzerdefinierte Kontrollkästchen zu implementieren

Heute ist mir plötzlich aufgefallen, dass die Stil...

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

MySQL 5.7 und höhere Versionen ermöglichen die di...

W3C Tutorial (3): W3C HTML Aktivitäten

HTML ist eine Hybridsprache, die zum Veröffentlic...

Beheben Sie das Problem, dass Änderungen an der Docker MySQL-Containerdatenbank nicht wirksam werden

Die Verwendung des offiziellen MySQL-Images erfor...

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Dieser Artikel dient lediglich der Erinnerung an ...

Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

HTML-Funktionsprinzip: 1. Lokaler Vorgang: Öffnen...

Detaillierte Beschreibung allgemeiner Ereignisse und Methoden von HTML-Text

Veranstaltungsbeschreibung onactivate: Wird ausgel...

202 kostenlose, hochwertige XHTML-Vorlagen (2)

Nach dem vorherigen Artikel 202 kostenlose hochwe...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

Diese eingeführten HTML-Tags entsprechen nicht un...

Der Speicherplatz wird in den Browsern IE, Firefox und Chrome unterschiedlich angezeigt

&nbsp;&nbsp;Die Anzeigeeffekte in den Brow...

8 Tipps für Vue, die Sie nach dem Lesen lernen werden

1. Verwenden Sie immer :key in v-for Die Verwendu...

Html+CSS-Zeichnungsdreiecksymbol

Schauen wir uns zunächst die Renderings an: XML/H...

Wie gestaltet man eine Webseite? Wie erstelle ich eine Webseite?

Wenn es um das Verständnis von Webdesign geht, sc...