<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);
}
ボタンをぼかしたくない場合、何をする必要がありますか?
子要素のぼかしを無効にする方法は?
.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>
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
の背景を送信します。
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>