Sand Glas-Effekt nur mit CSS

versuchen, Hintergrund div der Menüleiste verwischen, so dass es Seiteninhalt als Benutzer scrollt verschwimmen, aber es verwischt sich selbst und nicht den Hintergrund Inhalt, der auf Z-Index 0 ist. Wo mache ich Fehler? (Opazität ist kein Problem, ich habe das getestet) Danke für die Hilfe.Sand Glas-Effekt nur mit CSS

habe ich diese Stapel Antwort Hilfe CSS Blur effect does not work

diese

mein css ist

.menuwrapper { 
background-color: rgba(250,250,250, 0.1); 
position: fixed; 
width: 100%; 
height: 42px; 
z-index: 1; 
margin: 0px; 
overflow: hidden; 
} 

.menuwrapper::before{ 
    content: ''; 
    margin: -35px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    filter: blur(10px); 
    -moz-filter:blur(10px); 
    -o-filter:blur(10px); 
    -webkit-filter:blur(10px); 
    background: rgba(0,0,0,0.5); 
    z-index: 1; 
}

das ist mein html:

div class="menuwrapper" data-aos="slide-down" data-aos-delay="1800" data-aos-duration="500"> 
     <div class="menu"> 
      <div class="leftmenu"><a href="#intro"><img src="main_media/logo_kvarteto_black.png" alt="logo Sláčikové kvarteto Art" height="48" width="48" style="position:absolute;top:-3px"></a></div> 
      <div class="rightmenu"> 
       <ul> 
        <li><a class="anchor" href="#kontakt">KONTAKT</a></li> 
        <li><a class="anchor" href="#galeria">FOTO & VIDEO</a></li> 
        <li><a class="anchor" href="#clenovia">ČLENOVIA</a></li> 
        <li><a href="#repertoar">REPERTOÁR</a></li> 
        <li><a href="#kdehrame">KDE HRÁME</a></li> 
        <li><a href="#intro">DOMOV</a></li> 
       </ul> 
      </div> 
     </div> 
    </div>

Ergebnis Code oben:

Quelle

2017-12-15 Brano

Ihre html auch –

ah füge ich sehen, verschwimmen sollte darüber –

, was das Element selbst und nicht ein anderes Element angewendet werden? Das Ergebnis, das ich will, ist eine Menüleiste mit verschwommenem Hintergrund. Wenn Benutzer scrollen, wird der Inhalt der Seite dynamisch verwischt. – Brano

-1

Sie müssen ein div machen, das den zu verwischenden Bereich abdeckt.

<div id="glassLayer" style="width:100%">&nbsp;</div>

Quelle

2017-12-15 20:52:48

das macht es tatsächlich, wenn Sie Höhe und Breite nicht einstellen, tut es automatisch, was Ihr Code tut. Überprüfen Sie diese https://StackOverflow.com/questions/37460071/Css-blur-Effect-does-not-work so Fehler ist woanders – Brano

Sand Glas-Effekt nur mit CSS

Antwort

Verwandte Themen