Situasi sekarang macam ni Beijing dah set blur untuk gambar kedai, tapi sekarang saya guna filter untuk blur dan ada masalah telus
Sebab selalunya background blur tu memang pseudo. tetapi apabila menggunakan vue, sumber imej tidak boleh diperolehi dalam css, jadi... saya menulis elemen yang mengisi keseluruhan bekas melalui kedudukan mutlak

<template>
   <p id="headWrapper">
       <p class="e_header"  v-bind:style="{backgroundImage: 'url(' + this.seller.avatar + ')'}" ></p>
       <p class="top">
            <p class="seller_pic">
                <img v-bind:src="this.seller.avatar">
            </p>
            <p class="seller_desc">
                <p class="seller_name">{{this.seller.name}}</p>
                <p class="delivery_desc"><span>{{this.seller.description}}</span>平均{{this.seller.deliveryTime}}分钟/配送费￥{{this.seller.deliveryPrice}}</p>
                <p class="infos">公告：{{this.seller.infos[0]}}</p>
            </p>    
       </p>
       <p class="bottom">
           <p class="supports">
               <ul>
                   <li v-for="(item,index) in this.seller.supports">
                       {{item.description}}
                   </li>
               </ul>
           </p>
       </p>
    
    </p>
</template>

    #headWrapper{
        position: fixed;
        top:0;
        width: 100%;
        height: 2.2rem;
        padding: .15rem .25rem;
        box-sizing: border-box;
        font-size: 14px;
        z-index: 2;
    }
    .e_header{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left: 0;
        background: cover;
        z-index: -1;
        filter: blur(10px);
        -weblit-filter:blur(10px);
        background-position: center;
    }