web-dev-qa-db-ja.com

blur子要素なしでdivをblur（css）する方法

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

ボタンをぼかしたくない場合、何をする必要がありますか？

http://jsfiddle.net/L8ksa46g/

htmlcssblur
39
ggoha

子要素のぼかしを無効にする方法は？

.enableBlur>* {
  filter: blur(1.2px);
}

.disableBlur {
  filter: blur(0);
}
<div class="enableBlur">
  <hr>
  qqqqq<br>
  <span>qqqqq</span><br>
  <hr  class="disableBlur">
  <div>aaaaa</div>
  <div>bbbbb</div>
  <div class="disableBlur">DDDDD</div>
  <hr>
  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>
3
qwabra

blurまたはopacityプロパティを使用する場合、子要素を無視することはできません。これらのプロパティのいずれかを親要素に適用すると、子要素にも自動的に適用されます。

別の解決策があります。親div内に2つの要素を作成します。1つは背景用にdiv、もう1つはコンテンツ用にdivです。セットする position:relative親でdivに設定し、position:absolute; top:0px; right:0px; bottom:0px; left:0px;（または高さ/幅を100％に設定）を背景の子要素に設定します。このメソッドを使用すると、コンテンツdivは背景のプロパティの影響を受けません。

例：

<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>

コンテンツの背景にマスクがかかっている場合は、 the z-index property 2番目のコンテンツdivの背景を送信します。

35
Ashish Panwar

2つのディビジョンを作成し、それらのzインデックスとマージンを調整して、ぼかしたいディビジョンが上に表示するディビジョンの下にくるようにします。

PS：子が親のプロパティを継承するため、部門内に部門を作成しないでください。

#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>
5
Cyclops Blue