HTML & CSS - 背景图片溢出？

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

改变

.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);
}

Fixed on fixed 效果不佳。 如果还没有，请将 .insideBlur 放入 .boxBlur

像这样：

<div class = "boxBlur">
    <div class = "insideBlur"> 
       STUFF....
    </div>
</div>

Answer 2

好的，这就是我要做的：

假设您有一个 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;
}

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