Kako uporabiti filter CSS za sliko ozadja
Imam datoteko JPEG, ki jo uporabljam kot sliko ozadja za iskalno stran, za nastavitev pa uporabljam CSS, ker delam v kontekstu Backbone.js:
background-image: url("whatever.jpg");
Za ozadje želim uporabiti filter za zameglitev CSS 3, vendar ne vem, kako naj oblikujem samo ta element. Če poskusim:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
samo pod background-image
v mojem CSS, se oblikuje celotna stran in ne samo ozadje. Ali obstaja način, da izberem samo sliko in nanjo uporabim filter? Ali obstaja tudi način, da se zameglitev izklopi za vse druge elemente na strani?
449
3
Oglejte si to [pisalo] (http://codepen.io/aniketpant/pen/DsEve).
Uporabiti boste morali dva različna vsebnika, enega za sliko ozadja in drugega za vsebino.
V primeru sem ustvaril dva vsebnika,
.background-image
in.content
.Oba sta postavljena z
position: fixed
inleft: 0; right: 0;
. Razlika v njunem prikazu izvira iz vrednostiz-index
, ki sta bili za elementa različno nastavljeni.Opravičujem se za besedilo Lorem Ipsum.
Posodobitev
Zahvala Matthew Wilcoxson za boljšo izvedbo z uporabo
.content:before
http://codepen.io/akademy/pen/FlkzBZa to morate spremeniti strukturo svojega HTML. Če želite zamegliti ozadje, morate zamegliti celoten element. Če želite zamegliti samo ozadje, mora biti to samostojen element.
V zavihku
.content
v CSS ga spremenite vposition:absolute
. V nasprotnem primeru se prikazana stran ne bo premikala.