如何将 css 添加到 jquery 后伸？

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 应用于后伸图像？

Answer 1

你可以看我的演示：

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

DEMO

或

您只需在您的网页中包含 jQuery 库（1.7 或更新版本）和 Backstretch 插件文件，最好在页面底部，在结束 `` 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>

Answer 2

是的，这是可能的。 您只需要为后伸图像叠加：

#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 附加到容器上以对其进行一些控制，但这并不是特别必要。

如何将 css 添加到 jquery 后伸？

How to add css to jquery backstretch?

html

javascript

css

jquery

jquery-backstretch