[每天进步一点点~] uni-app css 实现 背景图模糊边

效果图：

代码：

<template>
    <view class="">
        <view class="head_channel">
            <view class="head_box">
                <view class="top-nav u-flex u-row-between">
                    <u-icon name="arrow-left" color="#fff" size="32"></u-icon>
                    <u-icon name="search" color="#fff" size="36"></u-icon>
                </view>
                <view class="u-flex u-row-between top-info">
                    <view class="u-flex">
                        <view class="top-info-image">
                            <image src="/static/news/book.png" mode=""></image>
                        </view>
                        <view class="u-flex-col u-row-between c-fff u-m-l-20 top-info-right">
                            <view class="u-p-t-20">
                                <view class="f-s-14 u-p-t-10 u-flex u-row-between top-title">
                                    <view>课程内容标题</view>
                                    <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
                                </view>
                                <view class="f-s-12 overhide-2 u-m-t-20">作者名称</view>
                            </view>
                            <view class="f-s-10 overhide-2 u-p-b-20">123人购买学习</view>
                        </view>
                    </view>
                </view>

            </view>
            <view class="blur_bj">
                <u-image :src="url" height="378"></u-image>
            </view>
            <view class="blur_bj_gray"></view> <!-- 是背景图变暗，相当于加了一层遮罩 -->
        </view>
        
        <!--  -->
        <view class="white-bg">
            <view class="dropdown-box u-p">
                <view class="u-flex u-row-between u-p u-p-b-0">
                    <view class="dropdown flex">
                        按章节正序
                    </view>
                    <view class="">
                        <u-icon name="play-circle" size="24" color="#111"></u-icon>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {
                    'background': "transparent"
                },
                url: '/static/news/book.png'
            }
        }
    }
</script>

<style lang="scss" scoped>
    
    .head_channel {
        height: 378rpx;
        position: relative;
        // overflow: hidden;
        .head_box {
            .top-nav {
                position: absolute;
                top: 26rpx;
                left: 30rpx;
                width: 90%;
                z-index: 2;
            }
            
            .top-info {
                position: absolute;
                height: 200rpx;
                top: 150rpx;
                left: 30rpx;
                width: 100%;
                z-index: 2;
                .top-info-image {
                    width: 150rpx;
                    height: 200rpx;
                    image {
                        width: 150rpx;
                        height: 200rpx;
                    }
                }
                .top-info-right {
                    height: 200rpx;
                }
            
                .top-title {
                    // height: 98rpx;
                    width: 500rpx;
                }
            }
            
        }
        .blur_bj {
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            z-index: -1;
            -webkit-filter: blur(5rpx);
            filter: blur(15rpx) brightness(70%); // 模糊半径和变暗
            transform: scale(1.2); // 控制边缘是否模糊，小于1的话边缘会模糊
        }
        .blur_bj_gray { // 相当于加了一层遮罩
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            background: rgba(0, 0, 0, .2);
            z-index: -1;
            opacity: 0.5;
        }
    }

    .dropdown-box {
        box-shadow: 0 1rpx 1rpx rgba($color: #000000, $alpha: 0.16);
    }

    .dropdown {
        width: 240rpx;
        height: 56rpx;
        border-radius: 36rpx;
        background-color: #E4E4E4;
    }


</style>