css - 使用blur()滤镜为什么有透明的效果

问题描述

现在情况是这样的 北京设置为店铺照片模糊的背景 但是现在用fliter模糊就有透明的问题 怎么解决因为 平常设置模糊的背景 一般是伪元素 但使用vue 是在css里不能获取图片资源 所以就写了一个元素 通过absolute定位占满整个容器写的

<template> <p id='headWrapper'> <p v-bind: ></p> <p class='top'> <p class='seller_pic'><img v-bind:src='https://www.haobala.com/wenda/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; }

问题解答

换个方法吧：

<p class='e_header'> <p v-bind: ></p></p>.e_header { //... background-color: #fff;}.e_header .cover { //... filter: blur(10px);}