毛玻璃效果

 

<template>
    <view>
        
        <view class='container'>
            <view class='frosted-glass'></view>
        </view>
            
    </view>
</template>
<script>
    
    export default {
        
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>
<style lang="scss">
    
     .container{
        width: 100%;height: 300px;
        position: relative;
        background-image: url('base64');
        // background-image: url('~@/static/workplatform/maoboli_bg2.jpg');
        background-position: center top;
        background-size: cover;
    }

    .frosted-glass{
        width: 100%;height: 70%;
        background: inherit;
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        -o-filter: blur(5px);
        filter: blur(10px); //此處能夠修改模糊度
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=4, MakeShadow=false);
        box-shadow: 0 1px 1px white;
    }
    
    
</style>