Как добавить css в jquery backstretch?

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

Да, это возможно. Вам просто нужна накладка для Бэкстретч изображений:

#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 я приложил Бэкстретч к контейнеру, чтобы иметь некоторый контроль над ним, но это не особенно нужно.

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

DEMO

или

Вы просто должны включать библиотеку 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>