Teilen Sie grafische Beispiele für die Verwendung von CSS3 zur Herstellung von Milchglas-HTML-Tutorial-php.cn

Heim

Web-Frontend

HTML-Tutorial

Teilen Sie grafische Beispiele für die Verwendung von CSS3 zur Herstellung von Milchglas

零下一度

Jun 24, 2017 pm 02:27 PM

csscss3利用制作效果Milchglas

Während ich eine Pause von meinem vollen Terminkalender mache, habe ich mir in letzter Zeit viele coole Effekte angeschaut. Mittlerweile gibt es viele Plug-Ins, die auf JQuery basieren, aber die Kompatibilität vieler Plug-Ins ist nicht sehr gut, daher sind native Plug-Ins die richtige Wahl. Im täglichen Leben ist Milchglas nicht mehr alltäglich. Es ist eine Sache von vor langer Zeit. Nein, hier ist das Milchglas:

Haha, kommen wir zur Sache. Schauen wir uns zuerst den Endeffekt an:

Nun gut, fangen wir mit unseren Schritten an:

Schritt 1: Grundaufbau der Seite:

Ich lege sie auf den Hauptteil eines großen Hintergrunds Bild und dann ein Div in der Mitte. Der HTML-Code lautet wie folgt:

<body>
<div >
    iPhone 7 dramatically improves the most important aspects of the iPhone experience. It introduces advanced new camera systems. The best performance and battery life ever in an iPhone. Immersive stereo speakers. The brightest, most colorful iPhone display. Splash and water resistance.1 And it looks every bit as powerful as it is. This is iPhone 7.
</div>
</body>

Der größte Teil des Textes dient dazu, das Div zu erweitern, um den Effekt deutlicher zu machen

Der CSS-Code lautet wie folgt:

   body {
            min-height: 100vh;
            box-sizing: border-box;
            margin: 0;
            padding-top: calc(50vh - 6em);
            font: 150%/1.6 serif;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }
        div {
            margin: 0 auto;
            padding: 1em;
            max-width: 30em;
            border-radius: 0.3em;
            box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,
            0 .5em 1em rgba(0, 0, 0, 0.6);
            text-shadow: 0 1px 1px hsla(0,0%,100%,.3);
            background: hsla(0,0%,100%,.3);
        }

Sehen Sie sich den Stilcode oben an. Im Körper ist vh die Größe des Ansichtsfensters, 100 ist 100 % und der Hintergrund ist auf eine feste Position eingestellt und ist voll. Legen Sie die Hintergrundfarbe in der Mitte fest und legen Sie dann den Boxstil fest

Das helle kleine transparente Glas kommt so heraus, also fangen wir an. Lassen Sie uns Milchglas verarbeiten

Schritt 2: Einstellungen für unscharfes Milchglas im Hintergrund

In CSS, dort ist die gleiche Unschärfeeinstellung, nämlich

Filter: Unschärfe (20 Pixel);

Der folgende Wert ist der Unschärfegrad. Je größer der Wert, desto unschärfer ist er wird unterstützt, nicht Prozentsatz;

Wir geben div direkt an. Es ist nicht möglich, diesen Stil hinzuzufügen, da dadurch das Unter-Div unscharf wird. Zu diesem Zeitpunkt können wir Pseudoelemente verwenden, nämlich::before;

Bevor wir Pseudoelemente verwenden, müssen wir dem Div eine relative Positionierung hinzufügen. Da das Pseudoelement nach der Verwendung von Unschärfe die gesamte Div-Box überläuft, müssen wir dies tun, um schön und edel zu sein füge overflow:hidden zum div hinzu; das ist:

Das Pseudoelement des div:

  overflow: hidden;
  position: relative;

Im Über dem CSS-Code können wir sehen, dass sich die eingestellte Unschärfe mit dem Div überschneidet und das Hintergrundbild mit dem Körper übereinstimmt. Der endgültige Effekt ist wie folgt:

   div::before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1;
            filter: blur(20px);
            margin: -20px;
            background: url("http://www.jackzxl.net/wp-content/MyFile/2016/09/iphone.jpg") fixed 0 center;
            background-size: cover;
        }

Das obige ist der detaillierte Inhalt vonTeilen Sie grafische Beispiele für die Verwendung von CSS3 zur Herstellung von Milchglas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Warum sind HTML -Tags für die Webentwicklung wichtig?May 02, 2025 am 12:03 AM

HtmltagsareessentialwebdevelopmentaTheStructureAndenhanceWebpages.1) Sie definelayout, semantics und interaktivität.2) SemantictagsimproveAccessibilityandseo.3) ordnungsgemäße Kennzeichnung.

Erläutern Sie die Bedeutung der Verwendung eines konsistenten Codierungsstils für HTML -Tags und -attribute.May 01, 2025 am 12:01 AM

Ein konsistenter HTML -Codierungsstil ist wichtig, da er die Lesbarkeit, Wartbarkeit und Effizienz des Codes verbessert. 1) Verwenden Sie Kleinbuchstaben und Attribute, 2) Behalten Sie die konsistente Einklebung, 3) Wählen und halten Sie sich an Einzel- oder Doppelzitate.

Wie implementieren Sie Multi-Project-Karussell in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

Lösung zur Implementierung von Multi-Project-Karussell in Bootstrap4, das Multi-Project-Karussell in Bootstrap4 implementiert, ist keine leichte Aufgabe. Obwohl Bootstrap ...

Wie erreicht die offizielle Website von Deepseek den Effekt des durchdringenden Maus -Scroll -Events?Apr 30, 2025 pm 03:21 PM

Wie kann man den Effekt der Penetration des Maus -Scroll -Ereignisses erreichen? Wenn wir im Internet stöbern, begegnen wir oft auf spezielle Interaktionsdesigns. Zum Beispiel auf der offiziellen Website von Deepseek � ...

So ändern Sie den Wiedergabesteuerungsstil von HTML -VideoApr 30, 2025 pm 03:18 PM

Der Standard -Playback -Steuerungsstil von HTML -Video kann nicht direkt über CSS geändert werden. 1. Erstellen Sie benutzerdefinierte Steuerelemente mit JavaScript. 2. verschönern diese Kontrollen durch CSS. 3. Berücksichtigen Sie Kompatibilität, Benutzererfahrung und -leistung. Wenn Sie Bibliotheken wie Video.js oder PLYR verwenden, können Sie den Prozess vereinfachen.

Welche Probleme werden durch die Verwendung von nativem Select auf Ihrem Telefon verursacht?Apr 30, 2025 pm 03:15 PM

Potenzielle Probleme bei der Verwendung natives Auswahl von Mobiltelefonen bei der Entwicklung mobiler Anwendungen haben wir häufig auf die Auswahl von Kästchen. Normalerweise Entwickler ...

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon?Apr 30, 2025 pm 03:12 PM

Was sind die Nachteile der Verwendung von nativen Auswahl auf Ihrem Telefon? Bei der Entwicklung von Anwendungen auf mobilen Geräten ist es sehr wichtig, die richtigen UI -Komponenten auszuwählen. Viele Entwickler ...

Wie optimieren Sie die Kollisionsabwicklung von Dritten in einem Raum mit drei.Js und Octree?Apr 30, 2025 pm 03:09 PM

Verwenden Sie drei.Js und Octree, um die Kollisionsabwicklung von Drittrohr im Raum zu optimieren. Verwenden Sie Octree in drei.js, um das Roaming von Drittpersonen im Raum zu implementieren, und fügen Sie Kollisionen hinzu ...

See all articles