css - Mengapa penapis blur() mempunyai kesan telus?

Question

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;
    }

Answer 1

Jom cuba kaedah lain:

<p class="e_header">
    <p class="cover" v-bind:style="{backgroundImage: 'url(' + this.seller.avatar + ')'}" ></p>
</p>

.e_header {
    //...
    background-color: #fff;
}

.e_header .cover {
    //...
    filter: blur(10px);
}