如何使用vanilla-lazyload添加css背景样式

Question

我正在考虑使用vanilla lazyload来提高网站的性能。但是，我正在努力寻找一种方法来加载带有样式的背景图像。

我在网站上的背景图片有以下语法:

<section class="ptb-100 gradient-overly-bottom" style="background: url('assets/img/hero-2.jpg')no-repeat center center / cover fixed">

使用普通的lazyload，语法改变如下:

<section class="ptb-100 gradient-overly-bottom lazy" data-bg="assets/img/hero-2.jpg">

香草lazyload的输出:

<section class="ptb-100 gradient-overly-bottom lazy entered loaded" data-bg="assets/img/hero-2.jpg" data-ll-status="loaded" style="background-image: URL("assets/img/hero-2.jpg");">

可以看到，输出不包括背景URL属性，而是用背景图像代替。

是否有办法在背景图像URL后添加样式?

Answer 1

你总是可以修改lazy类的CSS规则。下面是一个例子:

.lazy {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}

这是html

<section class="ptb-100 gradient-overly-bottom lazy" data-bg="assets/img/hero-2.jpg">
<!-- content of the section -->
</section>