Oto rozwiązanie, które działa ze stałym tłem, jeśli masz stałe tło i masz nałożone elementy i potrzebujesz do nich rozmytego tła, to rozwiązanie działa:
Obraz mamy taki prosty HTML:
<body> <!-- or any wrapper -->
<div class="content">Some Texts</div>
</body>
Stałe tło dla <body>
elementu wrapper:
body {
background-image: url(http://placeimg.com/640/360/any);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
I tutaj na przykład mamy nałożony element z białym przezroczystym tłem:
.content {
background-color: rgba(255, 255, 255, 0.3);
position: relative;
}
Teraz musimy użyć dokładnie tego samego obrazu tła naszego opakowania dla naszych elementów nakładki, używam go jako :before
klasy pseudo:
.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;
}
Ponieważ ustalone tło działa w ten sam sposób zarówno w elementach wrapper, jak i overlay, mamy tło w dokładnie tej samej pozycji przewijania elementu nakładanego i możemy je po prostu rozmyć. Oto działające skrzypce, przetestowane w przeglądarkach Firefox, Chrome, Opera i Edge: https://jsfiddle.net/0vL2rc4d/
UWAGA: W przeglądarce Firefox występuje błąd powodujący migotanie ekranu podczas przewijania i naprawiono rozmyte tło. jeśli jest jakieś rozwiązanie, daj mi znać
CSS filter
nie jest obsługiwany w przeglądarce Firefox, nie powinieneś go używać.