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

问题描述

问 题

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

<template>
   <div id="headWrapper">
       <div class="e_header"  v-bind:style="{backgroundImage: 'url(' + this.seller.avatar + ')'}" ></div>
       <div class="top">
            <div class="seller_pic">
                <img v-bind:src="this.seller.avatar">
            </div>
            <div 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>
            </div>    
       </div>
       <div class="bottom">
           <div class="supports">
               <ul>
                   <li v-for="(item,index) in this.seller.supports">
                       {{item.description}}
                   </li>
               </ul>
           </div>
       </div>
    
    </div>
</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;
    }

解决方案

换个方法吧：

<div class="e_header">
    <div class="cover" v-bind:style="{backgroundImage: 'url(' + this.seller.avatar + ')'}" ></div>
</div>

.e_header {
    //...
    background-color: #fff;
}

.e_header .cover {
    //...
    filter: blur(10px);
}

这篇关于css - 使用blur()滤镜为什么有透明的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！