css filter blur

[rockrgo 138]

Bom dia pessoal,

 

tenho a seguintes estrutura html

<div>
   <ul>
       <li></li>
   </ul>
</div>

estou tentando aplicar um filter: blur(2px) na minha div porém o blur afeta também o conteúdo da ul.....como faço para o blur pegar somente minha div? Tem como aplicar um efeito blur de background?

[Wanderson Valerio 102]

<ul> está dentro de <div>, logo <ul> é filho de <div>, então se você não quer que blur não afete o conteúdo de <ul>, então tire <ul> de dentro de <div>.

[rockrgo 138]

A ul tem que estar dentro da div!

[Diéssica 140]

Não é possível aplicar máscaras, filtros a um elemento pai sem que estes sejam herdados aos elementos descendentes.

É, portanto, o mesmo caso da propriedade opacity:

If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is <alphavalue>.

Porém, se [inline]ul[/inline] for filho de [inline]div[/inline] apenas por questões visuais, use a propriedade position e determine que [inline]ul[/inline] tenha a posição relativa a [inline]div[/inline]. Você pode usar pseudo-elementos também, se necessário.