Hier ist eine Lösung, die mit festen Hintergründen funktioniert. Wenn Sie einen festen Hintergrund haben und einige überlagerte Elemente haben und dafür unscharfe Hintergründe benötigen, funktioniert diese Lösung:
Bild wir haben dieses einfache HTML:
<body> <!-- or any wrapper -->
<div class="content">Some Texts</div>
</body>
Ein fester Hintergrund für <body>
oder das Wrapper-Element:
body {
background-image: url(http://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Und hier haben wir zum Beispiel ein überlagertes Element mit einem weißen transparenten Hintergrund:
.content {
background-color: rgba(255, 255, 255, 0.3);
position: relative;
}
Jetzt müssen wir genau das gleiche Hintergrundbild unseres Wrappers auch für unsere Overlay-Elemente verwenden. Ich verwende es als :before
Pseudo-Klasse:
.content:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
filter: blur(5px);
background-image: url(http://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Da der feste Hintergrund sowohl in Wrapper- als auch in überlagerten Elementen auf dieselbe Weise funktioniert, befindet sich der Hintergrund in genau derselben Bildlaufposition wie das überlagerte Element und wir können ihn einfach verwischen. Hier ist eine funktionierende Geige, die in Firefox, Chrome, Opera und Edge getestet wurde: https://jsfiddle.net/0vL2rc4d/
HINWEIS: In Firefox gibt es einen Fehler , der den Bildschirm beim Scrollen flackern lässt, und es gibt feste unscharfe Hintergründe. Wenn es eine Lösung gibt, lass es mich wissen
CSS filter
Ihrer Information - wird in Firefox nicht unterstützt, Sie sollten es nicht verwenden.