問題描述

現在情況是這樣的 北京設置為店鋪照片模糊的背景 但是現在用fliter模糊就有透明的問題 怎么解決因為 平常設置模糊的背景 一般是偽元素 但使用vue 是在css里不能獲取圖片資源 所以就寫了一個元素 通過absolute定位占滿整個容器寫的

<template> <p id='headWrapper'> <p v-bind: ></p> <p class='top'> <p class='seller_pic'><img v-bind:src='http://www.intensediesel.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);}