javascript - 如何将 css 添加到 jquery backstretch？

Question

所以我能够使用 jquery backstretch 创建幻灯片。

     $.backstretch([
      'assets/images/main-01.jpg'
    , 'assets/images/main-02.jpg'
    , 'assets/images/main-03.jpg'
  ], {duration: 5000, fade: 850});

不过，我想在图像上添加一个repeating-linear-gradient效果

background-image:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px);

是否可以将上述 css 应用于后拉伸(stretch)图像？

Answer 1

是的，这是可能的。您只需要为后伸图像覆盖:

#backstretch-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(
        0deg, 
        transparent, 
        transparent
        2px, rgba(0, 0, 0, 0.1) 0, rgba(0, 0, 0, 0.1) 3px
    );
} 

在this fiddle我将 backstretch 附加到容器以对其进行一些控制，但这并不是特别必要。