div做出一个模糊效果的背景、

最新推荐文章于 2024-06-29 16:08:06 发布

JIN丶X

最新推荐文章于 2024-06-29 16:08:06 发布

阅读量8.1k

点赞数 2

分类专栏：经验分享文章标签： filter 浏览器毛玻璃fliter属

本文链接：https://blog.csdn.net/xingjinxing520/article/details/52231465

版权

经验分享专栏收录该内容

0 篇文章 0 订阅

订阅专栏

类似毛玻璃的html布局

下面是一个简单的毛玻璃模糊效果布局一些新手应该不知道怎么用毛玻璃属性，据本人测试。貌似filter这个属性不支持苹果的sifari浏览器， overflow:hidden;这个属性也要加上，要不然边缘都会虚化了但是在360和火狐也会虚化的具体兼容各位自行查找吧。谢谢观看

<style type="text/css">
    .BG-blur{
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        background:url(xxxxxxxxxxx);
        overflow:hidden;
    }
</style>

<div class="blur">
    <div class="BG-blur"></div>
    <div>
        这里放你的内容 
    </div>
</div>