Wie verwischen (CSS) div ohne Unschärfe untergeordnetes Element

Question

<div class="row"> 
<div class="col-lg-3"> 
    <button class="btn"> 
     button 
    </button> 
</div> 

.col-lg-3{ 
    background-color:#8CD6EB; 
    -webkit-filter: blur(3px); 
    -moz-filter: blur(3px); 
    -o-filter: blur(3px); 
    -ms-filter: blur(3px); 
    filter: blur(3px); 
} 

Wenn ich will nicht den Knopf verwischen, was muss ich tun?

http://jsfiddle.net/L8ksa46g/

Answer 1

Wenn die blur oder opacity Eigenschaft verwendet, ist es nicht möglich, das Kind-Element zu ignorieren. Wenn Sie eine dieser Eigenschaften auf das übergeordnete Element anwenden, wird es automatisch auch auf untergeordnete Elemente angewendet.

Es gibt eine alternative Lösung: Erstellen Sie zwei Elemente innerhalb Ihrer Eltern div - eine div für den Hintergrund und eine weitere div für den Inhalt. Setzen Sie position:relative auf das übergeordnete Element div und setzen Sie position:absolute; top:0px; right:0px; bottom:0px; left:0px; (oder setzen Sie Höhe/Breite auf 100%) auf das Kindelement für den Hintergrund. Mit dieser Methode wird der Inhalt div nicht durch Eigenschaften im Hintergrund beeinflusst.

Beispiel:

<div id="parent_div" style="position:relative;height:100px;width:100px;"> 
 
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div> 
 
    <div id="textarea">My Text</div> 
 
</div>

Wenn Sie sehen, der Hintergrund über den Inhalt Maskieren, dann the z-index property verwenden div den Hintergrund hinter dem zweiten Inhalt zu senden.

Answer 2

Nur zwei Abteilungen erstellen und ihre Z-Indizes und Margen einstellen, so dass die Division Sie wollen unter der Teilung liegt verwischen Sie oben angezeigt werden sollen.

PS: Nicht Teilung innerhalb einer Abteilung führen das Kind erstellen erbt die Eigenschaften der Eltern.

#forblur { 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: blue; 
 
    margin: auto; 
 
    -webkit-filter: blur(3px); 
 
    -moz-filter: blur(3px); 
 
    -o-filter: blur(3px) -ms-filter: blur(3px); 
 
    filter: blur(3px); 
 
    z-index: -1; 
 
} 
 

 
#on-top-container { 
 
    margin: auto; 
 
    margin-top: -200px; 
 
    text-align: center; 
 
    height: 200px; 
 
    width: 200px; 
 
    z-index: 10; 
 
}

<div id="forblur"> 
 
</div> 
 
<div id="on-top-container"> 
 
    <p>TEXT</p> 
 
</div>