html – CSS模糊并使用绝对div保留锐利边缘

发布时间：2020-12-14 19:30:31 所属栏目：资源来源：网络整理

导读：如果img未设置为绝对值,这可以正常工作： div img { filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); margin: -5px -10px -10px -5px;}div { margin: 20px; overflow: hidden;} 示例

如果img未设置为绝对值,这可以正常工作：

div img {
    filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}
div {
    margin: 20px;
    overflow: hidden;
}

示例工作罚款：http://jsfiddle.net/ThinkingStiff/b8fLU/(取自另一个问题)

但是,如果我想用一个绝对的div使用背景图像呢？

<div id="background"></div>

#background {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
    filter: blur(5px) brightness(0.75);
    -webkit-filter: blur(5px) brightness(0.75);
    -moz-filter: blur(5px) brightness(0.75);
    -ms-filter: blur(5px) brightness(0.75);
    -o-filter: blur(5px) brightness(0.75);
    position: absolute;
    background-image: url('images/bg.png');
    z-index: 1;
}

使用上面的设置,如何实现相同的效果(模糊但具有尖锐边缘)？

解决方法

把你的模糊元素放在一个这样的容器中：

<div class="container">
    <div id="background"></div>
</div>

而不是使用高度：100％和宽度：100％使用如下：

.container{
    position:relative;
    width:300px;          /* this is an example */
    height:300px;         /* this is an example */
    overflow:hidden;
}

#background {
    left:-15px;
    right:-15px;
    top:-15px;
    bottom:-15px;
    /* other styles */
}

您需要从元素的每一边删除15px(或更多/更少).

DEMO – Full DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!