Nakładanie blur na elementy Css

Question

Mam mały problem bo chcę nałożyć efekt blur na wszystkie elementy na stronie oprócz jednego i wymyśliłem aby zrobić to w znaczniku body a potem zdjąć blura z tego jednego elementu który ma nie być zablurowany tylko nie wiem jak zdjąć blura i czy da się tak? Wie ktoś może jak to zrobić albo jakimś innym sposobem rozmazać tło i zostawić jeden element bez rozmazania?

Answer 1

mógłbyś zrobić .wrapper któremu możesz dać position: fixed; z właściwością backdrop-filter: blur(4px); oraz ustawić z-index: na przykładowo 9,

element który chcesz żeby był niezablurowany powinien mieć z-index większy od tego co dałeś na .wrapper czyli np 10; oraz position: relative;

https://codepen.io/Tnifey/pen/JjGaqeQ

 

Comments

Ok dzięki

---

@Tnifey, mam jednak problem bo dałem tego diva z blurem na samej  górze body ustawiłem z-index: 1; a na elemencie od blurownym z-index: 2; ale i tak blurujem mi ten element '

.blur{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  z-index: 1;
}

.bez-blura{
  width: 40vw;
  height: 45vw;
  background: #0E8C0A;
  position: relative;
  z-index: 2;
  /* display: none; */

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

 

Answer 2

Ja zrobiłbym dużego np. diva, na całe body, a temu jednemu elementowi nadał z-index: 2, żeby był ponad blurem. Myślę, że jest to całkiem dobre rozwiązanie...

Comments

Ok dzięki