如何模糊（css）div没有模糊子元素

问题描述

 < 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）; 
} 
  

如果不想模糊按钮，我需要做什么？ / p>

解决方案

使用 blur 或 opacity 属性，不可能忽略子元素。

有一个替代解决方案：在父项内创建两个元素 div - 一个 div 作为背景，另一个 div 在父 div 上设置 position：relative ，并设置 position：absolute; top：0px; right：0px; bottom：0px; left：0px; （或将height / width设置为100％）给背景的子元素。使用此方法，内容 div 不会受到背景上的属性的影响。

示例：

 < div id =parent_divstyle =position：relative; height：300px; width：300px;> 
< div id =backgroundstyle =position：absolute; top：0; left：0; right：0; bottom：0; background-color：red; filter：blur（3px）; z- index：-1;>< / div> 
< div id =textarea>我的文字< / div> 
< / div> 
  

如果您看到内容的背景屏蔽，请使用发送背景背后的第二个内容 div 。

<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);
}

If a do not want to blur button, what i need to do?

http://jsfiddle.net/L8ksa46g/

解决方案

When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.

There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.

Example:

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <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>

If you see the background masking over the content, then use the z-index property to send the background behind the second content div.

这篇关于如何模糊（css）div没有模糊子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！