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;
}
Let’s try another method: