所以我有一个div,里面有另一个div放在我的页面中心,我希望该div的背景是整个窗口的大小,但我希望它只显示div中的背景而不是外部它
.boxblur {
position:fixed;
overflow:hidden;
top:27%;
left:25%;
right:25%;
bottom:45%;
min-height:289px;
max-height:289px;
min-width:400px;
font-size:33px;
color:white;
opacity:1;
transition:6s all;
-webkit-transition:6s all;
}
.insideblur{
position:fixed;
display:block;
top:0px;
bottom:0px;
left:0px;
right:0px;
transition:1s all;
-webkit-transition:1s all;
background-image: url('pics/back.jpg');
background-size:cover;
background-position:center center;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
我的内部模糊嵌套在boxblur中。我已经尝试了很多不同的东西,没有任何东西可以保持盒子内的模糊。对
答案 0 :(得分:0)
好的,这就是我要做的事情:
例如,假设您有div
id
background-img
。(在这种情况下,背景是图片)
<div id="background-img">
</div>
在 CSS 文件中:
#background-img {
background: url('yourimage.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
然后你可以添加你想要的任何样式。希望有所帮助。
答案 1 :(得分:0)
更改
.insideblur{
position:absolute;
display:block;
top:0px;
bottom:0px;
left:0px;
right:0px;
transition:1s all;
-webkit-transition:1s all;
background-image: url('pics/back.jpg');
background-size:cover;
background-position:center center;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
修复了固定不起作用。 如果还没有,请将.insideBlur放在.boxBlur
中 像这样:<div class = "boxBlur">
<div class = "insideBlur">
STUFF....
</div>
</div>