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:
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
Artikel empfehlen
Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)
Wenn es um Tool-Websites geht, haben wir zunächst...
So ändern Sie das Kennwort von mysql5.7.20 unter Linux CentOS 7.4
Nach dem Upgrade von MySQL auf Version 5.7 wurde ...
Implementierung des MySQL Shell import_table-Datenimports
Inhaltsverzeichnis 1. Einführung in import_table ...
Centos erstellt ein Prozessdiagramm für den Chrony-Zeitsynchronisationsserver
Meine Umgebung: 3 centos7.5 1804 Meister 192.168....
Detaillierte Erklärung zur Abfrage von Feldern im JSON-Format in MySQL
Während des Entwicklungsprozesses trat eine Anfor...
Implementierungsbeispiel für die Datums- und Uhrzeitverarbeitung des WeChat-Applets wxs
Inhaltsverzeichnis 1. Zeitstempel bis heute 2. Ko...
React tsx generiert einen zufälligen Bestätigungscode
React tsx generiert einen zufälligen Bestätigungs...
Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren
Heutzutage ist das Kopieren von Websites im Intern...
Schritte zum Bereitstellen von Hyper-V zur Desktop-Virtualisierung (grafisches Tutorial)
Für die Bereitstellung von Hyper-V gelten die fol...
Detaillierte Erläuterung der JavaScript-BOM-Zusammensetzung und häufiger Ereignisse
Inhaltsverzeichnis 1. Stückliste 2. Zusammensetzu...
Sprungcode für HTML-Seite
Speichern Sie den folgenden Code als Standard-Home...
Wie wählt man das perfekte Aloe Vera Gel aus? Perfektes Aloe Vera Gel – So erkennen Sie Echtheit und Fälschung
Die neueste Verpackungsschachtel für Perfect Aloe...
Die perfekte Lösung für die Installation von MYSQL5.7.24 ohne Datenverzeichnis und my-default.ini und Dienststartfehler
Downloadadresse der offiziellen MySQL-Website: ht...
Detaillierte Erläuterung des Linux-CRM-Bereitstellungscodes
Linux-Grundkonfiguration Kompilieren und installi...
Überblick über die grundlegenden Bestandteile von HTML-Webseiten
<br />Die Informationen auf Webseiten besteh...