Heim >Web-Frontend >CSS-Tutorial >Wie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?
Wie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?
- Susan SarandonOriginal
- 2024-10-25 02:20:02575Durchsuche
Hintergrundunschärfe von untergeordneten Elementen entfernen
Sie haben ein
Lösung: Erstellen Sie ein Overlay-Element
Um dies zu erreichen, können Sie ein separates
Hier ist die geänderte HTML-Struktur:
<code class="html"><div class="content">
<div class="overlay"></div>
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div></code>
CSS:
<code class="css">.content {
float: left;
width: 100%;
}
.content .overlay {
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
z-index: 0;
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
position: relative;
z-index: 10;
}</code>
In diesem Setup wird auf das .overlay-Element der Unschärfeeffekt angewendet, während das .opacity-Element verhindert, dass dieser Effekt die untergeordneten Elemente erreicht, was zu scharfen und fokussierten untergeordneten Elementen über einem unscharfen Hintergrund führt.
Das obige ist der detaillierte Inhalt vonWie entferne ich Hintergrundunschärfe von untergeordneten Elementen und behalte gleichzeitig den unscharfen Hintergrund bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!