Javascript 如何将css添加到jquery backstretch？

因此，我能够使用jquery backstretch创建幻灯片

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

但是，我希望在图像上添加一个重复的线性渐变效果

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

是否可以将上述css应用于backstretch图像？

您可以看到我的演示：

html {
    height: 100%;
    overflow-y: hidden;
}

body {
    background-image: url('http://dl.dropbox.com/u/515046/www/garfield-interior.jpg');
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

或

您只需在网页中包含jQuery库（1.7版或更高版本）和Backstretch插件文件，最好在页面底部，然后再关闭``

标记

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
  // To attach Backstrech as the body's background
  $.backstretch("path/to/image.jpg");

  // You may also attach Backstretch to a block-level element
  $(".foo").backstretch("path/to/image.jpg");

  // Or, to start a slideshow, just pass in an array of images
  $(".foo").backstretch([
    "path/to/image.jpg",
    "path/to/image2.jpg",
    "path/to/image3.jpg"    
  ], {duration: 4000});
</script>

//将背条作为身体的背景
$.backstretch（“path/to/image.jpg”）；
//也可以将反拉伸附着到块级图元
$（“.foo”）.backstretch（“path/to/image.jpg”）；
//或者，要开始幻灯片放映，只需传入一组图像
$（“.foo”）.backstretch([
“path/to/image.jpg”，
“path/to/image2.jpg”，
“路径/to/image3.jpg”
]，{持续时间：4000}）；

是的，这是可能的。 您只需要为backstretch图像添加一个覆盖：

#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
    );
} 

在本例中，我将backstretch连接到一个容器以对其进行一些控制，但这并不是特别必要