HTML& CSS - 背景图像溢出?

时间:2014-08-16 03:22:46

标签: html css css3 blurry

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

2 个答案:

答案 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>