1

所以我能够使用 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 应用于后伸图像？

4

2 回答 2

3

对的，这是可能的。 您只需要一个覆盖后拉伸图像：

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

于 2015-09-25T08:05:26.563 回答
0

你可以看我演示：

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 插件文件，最好在页面底部，在关闭 `` 之前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>
于 2015-09-25T07:19:53.893 回答