CSS实现背景图片模糊——毛玻璃效果

✨CSS实现背景图片模糊——毛玻璃效果 | 使用CSS属性 filter、backdrop-filter

代码如下

<view class="container" :style="{height:screenHeight+'px'}">
        <image class="back_ground_image" :style="{height:screenHeight+'px'}"
            src='https://img14.360buyimg.com/pop/jfs/t1/91930/39/45423/96800/653b27c3Fd65eb37e/045c67159d52eaf9.jpg'>
        </image>
        <image class="book_image"
            src='https://img14.360buyimg.com/pop/jfs/t1/91930/39/45423/96800/653b27c3Fd65eb37e/045c67159d52eaf9.jpg'>
        </image>
        <le-audio :activeIndex="audioActiveIndex" :audioData="audioList" :showAudioListIcon="showAudioListIcon"
            :showAudioSpeedIcon="showAudioSpeedIcon" :autoplay="autoplay" @onOpenAudioList="onOpenAudioList"
            @onAudioChange="onAudioChange"></le-audio>
    </view>

<style lang='scss' scoped>
    .container {
        display: flex;
        flex-direction: column;
        background-color: #fbd2d0;
        /* 设置模糊程度 */
        backdrop-filter: blur(5px);
        height: 100%;
        justify-content: flex-end;
        align-items: center;
    }

    .book_image {
        width: 150px;
        height: 200px;
        margin-bottom: 50%;
    }

    .back_ground_image {
        position: absolute;
        width: 750rpx;
        z-index: -1;
        filter: blur(100px);
    }
</style>

Tips：

uniapp页面铺满全屏，获取系统高度，再进行设置背景颜色或图片

    
    onLoad((options) => {
        const screenHeight = ref(0)
        screenHeight.value = uni.getSystemInfoSync().windowHeight;
     }

参考：https://blog.csdn.net/m0_62159662/article/details/127839543