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
![]()
{{this.seller.name}}
{{this.seller.description}}平均{{this.seller.deliveryTime}}分钟/配送费￥{{this.seller.deliveryPrice}}
公告：{{this.seller.infos[0]}}
- {{item.description}}
#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; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Let’s try another method: