css怎样实现依稀配景结果

css实现依稀配景结果的办法：在父容器中设定配景，而且运用相对定位。而在:after中只需要继承配景，而且设定依稀，绝对定位遮盖父元素即可。这样父容器中的子元素就可以不挨依稀程度影响。

   like window

css代码：

/*配景依稀*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(2px);
    z-index: 2;
}
.drag{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:200px;
    height:200px;
    text-align: center;

    z-index:11;
}

固然，看了上面的代码就能发明父容器下面的子代元素也是要运用绝对定位的，但是这个不会影响到背面的布局的，所以请安心运用。要注意的地方是要运用z-index肯定层级关系，必需确保子代元素（也就是这里的drag）是在最上层的。否则子代元素的文字是不会涌现的。

结果：

配景部分依稀

比拟较上一个结果而言，配景部分依稀就比拼简略了。这时父元素基本就不消设定伪元素为依稀了。直接类比上面的代码把子元素依稀掉，但是子元素的后代可能不克不及依稀了（这点要注意，解决方法就是上一个结果的描述那样）。

HTML布局：

   
        like window
   

css代码：

/*配景部分依稀*/
.bg{
    width:100%;
    height:100%;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
    z-index:1;
}
.drag{
    margin:100px auto;
    width:200px;
    height:200px;

    background: inherit;

    position: relative;
}
.drag >div{
    width:100%;
    height: 100%;
    text-align: center;
    line-height:200px;
    position: absolute;
    left:0;
    top:0;
    z-index: 11;
}
.drag:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(15px);/*为了依稀更显明，调高依稀度*/
    z-index: 2;
}

结果如下：

配景部分清晰

配景部分清晰这个结果说简略也不简略，说难也不难。关键还是要利用好background:inherit属性。这里可不克不及运用transform让它垂直居中了，大家还是选中flex布局吧。要是这里再运用transform属性的话会让配景也偏移的。这样就没有部分清晰的结果了。

html布局同上。

css代码：

/*配景部分清晰*/
.bg{
    width:100%;
    height:100%;
    position: relative;
    background: url("../image/banner/banner.jpg") no-repeat fixed;
    padding:1px;
    box-sizing:border-box;
}
.bg:after{
    content: "";
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    background: inherit;
    filter: blur(3px);
    z-index: 1;
}
.drag{
    position: absolute;
    left:40%;
    top:30%;
    /*transform: translate(-50%,-50%);*/
    width:200px;
    height:200px;
    text-align: center;

    background: inherit;
    z-index:11;

    box-shadow:  0 0 10px 6px rgba(0,0,0,.5);
}

结果：

以上就是css怎样实现依稀配景结果的细致内容，更多请关注 百分百源码网 其它相干文章！