css - 使用blur()滤镜为什么有透明的效果
巴扎黑
巴扎黑 2017-05-16 13:26:12
[CSS3讨论组]

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

    #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;
    }
巴扎黑
巴扎黑

全部回复(1)
仅有的幸福

换个方法吧:

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

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

.e_header .cover {
    //...
    filter: blur(10px);
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号