如何将css添加到jquery backstretch？答案

【问题标题】：How to add css to jquery backstretch?如何将css添加到jquery backstretch？
【发布时间】：2015-09-25 07:18:06
【问题描述】：

所以我能够使用 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 应用到 backstretch 图像？

【问题讨论】：

标签： javascript jquery html css jquery-backstretch

【解决方案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 附加到一个容器以对其进行一些控制，但这并不是特别必要的。

【讨论】：

【解决方案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%;
}

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>

【讨论】：