Question

所以我有一个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中。我已经尝试了很多不同的东西，没有任何东西可以保持盒子内的模糊。对

Answer 1

好的，这就是我要做的事情：

例如，假设您有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;
}

然后你可以添加你想要的任何样式。希望有所帮助。

Answer 2

更改

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

HTML＆amp; CSS - 背景图像溢出？

2 个答案: