国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

css - Warum hat der Filter ?blur()' einen transparenten Effekt?
巴扎黑
巴扎黑 2017-05-16 13:26:12
0
1
874

Die aktuelle Situation ist so. Peking hat einen unscharfen Hintergrund für Ladenfotos festgelegt, aber jetzt verwende ich einen Filter, um ihn zu verwischen, und es gibt ein transparentes Problem.
Weil der unscharfe Hintergrund normalerweise ein Pseudoelement ist. Bei Verwendung von Vue kann die Bildressource jedoch nicht in CSS abgerufen werden. Daher habe ich ein Element geschrieben, das durch absolute Positionierung den gesamten Container ausfüllt

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

Antworte allen(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);
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage