.content {
float: left;
width: 100%;
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
}
.info {
float: left;
margin: 100px 0px 0px 30px;
width: 410px;
}
<div class="content">
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>
如果我不想模糊按钮,我需要做什么?
我想在不诉诸绝对定位的情况下解决问题
使用
blur
或 opacity
属性时,无法忽略子元素。如果您将这些属性中的任何一个应用于父元素,它也会自动应用于子元素。
还有一种替代解决方案:在父级
div
中创建两个元素 - 一个 div
用于背景,另一个 div
用于内容。在父元素 position:relative
上设置 div
,并为背景子元素设置 position:absolute; top:0px; right:0px; bottom:0px; left:0px;
(或将高度/宽度设置为 100%)。使用这种方法,内容div
不会受到背景属性的影响。
示例:
#parent_div {
position: relative;
height: 100px;
width: 100px;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}
<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>
z-index
属性 将背景发送到第二个内容 div
后面。
如何禁用子元素的模糊?
.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>
我的解决方案看起来有点简单,但可能存在一些兼容性问题。我刚刚使用了 backdrop-filter 和模糊滤镜。
backdrop-filter: blur(2px);
只需创建两个分区并调整它们的 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>