Do not apply filter css on child element

Question

Do not apply filter css on child element

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I want to do a modal window, but wanted to do something different, something out of the standard opacity . I wanted to use a filter: blur(); , but I wanted to do it in the tag body and would get all the elements inside the tag body ...

Is there any way to block filter:blur(); in a child element?

css3

asked by anonymous 04.12.2017 / 01:35

2 answers

2

No, because blur is a filter, so you can not undo it, note that even applying filter: none will not work, see an example just to understand problem (this is not the solution, is a test):

html, body {
    height: 100%;
}
.main {
    min-height: 100%;
    background: url(https://i.stack.imgur.com/Pk9BV.jpg);
    -webkit-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
}

.main .content {
     filter: none;
}

<div class="main">
     <div class="content">xxxx</div>
</div>

How to solve

You can simulate a background using position: relative; + position: absolute;

It would look like this:

Note that in .main you can put anything, text, image, etc., and in .main-bg there will be the elements you want to apply the filter, such as blur for example

html, body {
    height: 100%;
}

.main-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: url(https://i.stack.imgur.com/Pk9BV.jpg);
    -webkit-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
}

.main {
    position: relative;
    z-index: 101; /*posiciona acima do */
}

<div class="main">
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     <img src="https://i.stack.imgur.com/Pk9BV.jpg"></div><divclass="main-bg"></div>

04.12.2017 / 02:17

What is the likelihood of * hash * CRC32b being repeated? Can not bind to 'ngModel' since it is not a known property of 'input'

score 1 · Accepted Answer

Yes, using the exclude selector :not() :

body > *:not(#elemento_nao_afetado) {
  filter: blur(5px);
}

body > *:not(#modal) {
  filter: blur(5px);
}

<p>texto texto</p>
<br />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg"/><br/><divid="modal" style="display: block; width: 200px; height: 100px; background: yellow; position: absolute; top: 0; left: 200px;">
   <p>modal não afetado pelo blur</p>
</div>