好的,现在我一直在搜索StackOverflow类似的问题,但它们都不适合我的情况。 所以我有一个覆盖整个网页的背景图片,在中心,我有一个包含一些其他子div的div(带有登录表单,一些段落等) 我想要的是仅模糊背景图像中与div重叠的那部分。图片:
所以我只希望红色矩形中的图像部分模糊。如果我只是在主div中添加模糊滤镜,它只会模糊它的内容(文本和表单)。另外,请记住,背景图像不是div的背景,而是整个页面的背景。
答案 0 :(得分:2)
试试这个,它可能有效,
<div class="blur"></div>
<style>
.blur {
width:100%;
height:100%;
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
</style>
答案 1 :(得分:1)
在班级
中使用过滤器:blur('5px');
答案 2 :(得分:1)
Arkej的重复提及似乎符合您的需求。(<div> blur of part of Backgroung image with css)
诀窍是在background-position:fixed;
/ html
上使用body
,并在其上方模糊元素,因此,两个背景图像都位于窗口的同一区域。
副本使用额外元素,如果您不想修改HTML结构,则可以是伪元素。
Flex
也可用于居中体。
div {
border:solid ;
padding:6vw ;
position:relative;
}
div:before{
content:'';
position:absolute;
z-index:-1;
top:0;
left:0;
bottom:0;
right:0;
background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
filter:blur(4px);
background-size:100vw auto;
/* makup ? */
box-shadow:inset 0 0 0 50vw rgba(255,255,255,0.2)
}
/* makup to center content */
html {
min-height:100%;
display:flex;
background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
background-size:100vw auto
}
body {
margin:auto;
}
&#13;
<div>blur my background</div>
&#13;
答案 3 :(得分:1)
background-color: rgba(0, 0, 0, 0.61);
backdrop-filter: blur(5px);
一些解释: 背景过滤器仅用于制作屏幕指定部分/区域的背景,您可以将其用于div,图像和某些元素。 背景颜色是可选的,并非总是必要的,以防您想使背景模糊更深。 支持Firefox,Safari和Chrome。 在此处查看文档https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter
答案 4 :(得分:0)
在这里,此示例将完成工作。这也与Chrome,Opera,Edge,Firefox和Safari兼容。
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.section-blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(10px);
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="container section-blur">
<div class="row">
<div class="col">
Sulhadin Öney
</div>
<div class="col">
Sulhadin Öney
</div>
</div>
<div class="row">
<div class="col">
Sulhadin Öney
</div>
<div class="col">
Sulhadin Öney
</div>
<div class="col">
Sulhadin Öney
</div>
</div>
</div>