search

hilongjw / vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
http://hilongjw.github.io/vue-lazyload/
MIT License
8.01k stars 868 forks source link

Linear-gradient on lazy-backgrounds #396

Open lupas opened 5 years ago

lupas commented 5 years ago

Hello there

I used to do the following to darken my background photos with a single line of css:

background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(image.png);

Now with vue-lazyload, I can't figure out a simple way to do the same. Any ideas?

fritzfr commented 5 years ago

Yip, would also be interested in this.

backrunner commented 5 years ago

Set linear-gradient on an overlay, that's work for me.

<div class="wallpaper" v-lazy:background-image="wallpaper">
    <div class="wallpaper-overlay"></div>
</div>

The z-index of the overlay needs to be lower than the background div.

harrytran998 commented 4 years ago

Set linear-gradient on an overlay, that's work for me.

<div class="wallpaper" v-lazy:background-image="wallpaper">
    <div class="wallpaper-overlay"></div>
</div>

The z-index of the overlay needs to be lower than the background div.

Thank you! It's worked 🥳