css - Mengapa penapis blur() mempunyai kesan telus?
巴扎黑
巴扎黑 2017-05-16 13:26:12
0
1
832

Situasi sekarang macam ni Beijing dah set blur untuk gambar kedai, tapi sekarang saya guna filter untuk blur dan ada masalah telus
Sebab selalunya background blur tu memang pseudo. tetapi apabila menggunakan vue, sumber imej tidak boleh diperolehi dalam css, jadi... saya menulis elemen yang mengisi keseluruhan bekas melalui kedudukan mutlak

<template>
   <p id="headWrapper">
       <p class="e_header"  v-bind:style="{backgroundImage: 'url(' + this.seller.avatar + ')'}" ></p>
       <p class="top">
            <p class="seller_pic">
                <img v-bind:src="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;
    }
巴扎黑
巴扎黑

membalas semua(1)
仅有的幸福

Jom cuba kaedah lain:

<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);
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan