CSS: Obejście do filtra-tła?

Question

backdrop-filter to najnowsza funkcja css, która nie jest jeszcze dostępna w nowoczesnych przeglądarkach (co najmniej od 1 lipca 2016 r.).

• Chrome 51 obsługuje backdrop-filter poprzez flagę Experimental Web Platform.
• Safari 9.1 wspiera ją --webkit- prefiksu
• Firefox 47 nie mają wsparcia

Będąc w takim stanie nie do użytku, chciałbym wiedzieć, czy istnieje jakiekolwiek alternatywne sposób sprowadzania tego samego rezultatu.

JS obejścia rozmycie, skali szarości, ... są również mile widziane

Rozwój backdrop-filter mogą być śledzone przez https://bugs.chromium.org/p/chromium/issues/detail?id=497522

Answer 1

Można spróbować dodać różne filtry do obrazów tła:

https://css-tricks.com/almanac/properties/f/filter/

Upadek tego polega na tym, że działa tylko na obrazach.

Zasadniczo istnieją 10 wbudowane filtry dla własności CSS filter:

• rozmycia (px)
• jasność (%)
• kontrastu (%)
• drop-cień (h-v-cień cień plama rozprzestrzenianie kolor)
• skali szarości (%)
• odcień obracania (dEG)
• inwertowanego (%)
• zmętnienie (%)
• Nasycenie (%)
• sepia (%)

a dodatkowo można je URL zapewniają, wich zawiera plik XML z appropariate filtr.

Answer 2

ja nie wiem, czy nadal jesteś w pogoni to pytanie, ale dla innych użytkowników w przyszłości:

Efekt ten można osiągnąć w następujący sposób z CSS pseudo-klas, bez JavaScript jest konieczne! pokazano poniżej:

body, 
 
main::before { 
 
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0/cover fixed; 
 
} 
 

 
main { 
 
    margin: 100px auto; 
 
    position: relative; 
 
    padding: 10px 5px; 
 
    background: hsla(0, 0%, 100%, .3); 
 
    font-size: 20px; 
 
    font-family: 'Lora', serif; 
 
    line-height: 1.5; 
 
    border-radius: 10px; 
 
    width: 60%; 
 
    box-shadow: 5px 3px 30px black; 
 
    overflow: hidden; 
 
} 
 

 
main::before { 
 
    content: ''; 
 
    margin: -35px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    filter: blur(20px); 
 
    z-index: -1; 
 
}

<main> 
 
    <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45; 
 
    even those we love. Because we see things so often, we see them less and less." 
 
    <footer>&mdash; 
 
     <cite> 
 
     Joseph B. Wirthlin 
 
     </cite> 
 
    </footer> 
 
    </blockquote> 
 
</main>

żywo przykład można zobaczyć na Codepen: https://codepen.io/jonitrythall/pen/GJQBOp

Szybkie Uwaga:

zależności od już określoną strukturę strony, twój Indeks Z może różnić się od opisanego w ex mple.

Answer 3

Używam tego, aby uzyskać popularny efekt matowego szkła. Aż ktoś wymyśli powodzeniem dobrą PolyFill dla backdrop-filter używam lekko przezroczyste tło jako awaryjnej:

/* slightly transparent fallback */ 
.backdrop-blur { 
    background-color: rgba(255, 255, 255, .9); 
} 

/* if backdrop support: very transparent and blurred */ 
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) { 
    .backdrop-blur { 
    background-color: rgba(255, 255, 255, .5); 
    -webkit-backdrop-filter: blur(2em); 
    backdrop-filter: blur(2em); 
    } 
} 

Filtr działa w currently supported przeglądarek. (Safari i Chrome z włączonymi eksperymentalnymi funkcjami platformy internetowej) Kod powinien również działać w przyszłych przeglądarkach, które obsługują niesprawdzone backdrop-filter, jeśli specyfikacja nie ulegnie zmianie przedtem.

Przykłady bez i ze wsparciem zasłona filtra: