css - Why does the blur() filter have a transparent effect?

Question

The current situation is like this. Beijing sets a blurred background for store photos, but now using filterer to blur it has a transparent problem. How to solve it?
Because the blurred background is usually a pseudo element, but using vue cannot be obtained in css. For image resources, I wrote an element that fills the entire container through absolute positioning

<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

Let’s try another method:

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