如何向jquery回放添加css？

Question

因此，我能够使用jquery回放创建幻灯片。

     $.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应用于回放图像？

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

在这把小提琴中，我将反向扩展附加到容器以控制它，但这并不是特别必要的。

Answer 2

你可以看到我的演示：

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或更高版本)和回放插件文件包括在您的网页中，最好是在页面底部，在关闭 tag之前。

<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>