处理安卓机不支持backdrop-filter毛玻璃效果样式

最新推荐文章于 2024-07-30 15:41:25 发布

小雍雍

最新推荐文章于 2024-07-30 15:41:25 发布

阅读量2.4k

点赞数

分类专栏： UI 文章标签：前端 vue.js css

本文链接：https://blog.csdn.net/yongyafang123/article/details/123847662

版权

UI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

处理安卓机不支持backdrop-filter毛玻璃效果样式
方式一：
html:

<div>
    <main>
        <img class="bg" src="../../static/images/bg.png" alt="">
        <blockquote> “The only way to get rid of a temptation[…]” 
            <footer>
                — <cite> Oscar Wilde, The Picture of Dorian Gray </cite>
            </footer>
        </blockquote>
    </main>
</div>

css:

main { 
        width: 100vw;
        height: 100vh;
        position: relative;
        background: hsla(0,0%,100%,.3);
        overflow: hidden; 
     } 
    main::before { 
        // 就是不能图片直接毛玻璃 （图片有object-fit: cover;裁剪方式）
        background: url('../../static/images/bg.png') 0 / 100% 100% fixed rgba(77, 77, 77, 1); 
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        filter: blur(30px);
        margin: -30px; 
     }

方式二：

<div class="robotMoodDetailPage">
        <img class="bg voideBgFilter" src="../../static/images/bg.png" alt="">
        <div class="robotMoodDetailPageCon">
        树大根深大哥
        </div>
</div>

.robotMoodDetailPage{
    width: 100vw;
    height: 100vh;
    background: rgba(77, 77, 77, 1);
    .bg {
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
    }
    .voideBgFilter {
        background: inherit;
        -webkit-filter: blur(30px);
        -moz-filter: blur(30px);
        -ms-filter: blur(30px);
        -o-filter: blur(30px);
        filter: blur(30px);
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);  /* ie6-9*/
    }
    .robotMoodDetailPageCon {
        position: relative;
        width: 100vw;
        height: 100vh;
        padding-top: 2.75rem;
        overflow: hidden;
        position: absolute;
        right: 0;
        bottom: 0;
        // background: inherit;
        overflow: hidden;
        color:#fff;
    }
}