Возможно создание эффекта параллакса без фонового изображения на div?

Question

Я знаю, как создать эффект параллакса, используя фоновый размер на DIV и используя фоновое вложение и т.д., но если у меня есть код (созданный плагин Wordpress), который выглядит примерно так:

<div class="big-leader> 
<div class="backstretch"> 
<img src="background-image.jpg"> 
</div> 
</div> 

хау создать эффект параллакса? Можно ли применить фоновое изображение на div (с помощью css?)

Answer 1

Я думаю, вы можете просто получить источник изображения и применить его к фоновому изображению родительского div, а затем удалить изображение. что-то вроде этого:

образец CSS:

.backstretch { 
    width: 50%; 
    height: 200px; 
    margin: 200px auto; 
} 

HTML

<div class="big-leader"> 
    <div class="backstretch"> 
     <img src="test.png"> 
    </div> 
    <div class="backstretch"> 
     <img src="test1.jpg"> 
    </div> 
</div> 

Jquery:

$(function() { 
    $('.backstretch').each(function(index, el) { 
     var img = $(el).children('img'); 
     $(el).css('background', 'url(' + img.attr('src') + ') 50% 50%/cover fixed'); 
     img.remove(); 
    }); 
}); 

$(function() { 
 
\t \t \t $('.backstretch').each(function(index, el) { 
 
\t \t \t \t var img = $(el).children('img'); 
 
\t \t \t \t $(el).css('background', 'url(' + img.attr('src') + ') 50% 50%/cover fixed'); 
 
\t \t \t \t img.remove(); 
 
\t \t \t }); 
 
\t \t });

.backstretch { 
 
\t \t \t width: 50%; 
 
\t \t \t height: 200px; 
 
\t \t \t margin: 200px auto; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="big-leader"> 
 
\t \t <div class="backstretch"> 
 
\t \t \t <img src="http://via.placeholder.com/350x150"> 
 
\t \t </div> 
 
\t \t <div class="backstretch"> 
 
\t \t \t <img src="http://via.placeholder.com/500x200"> 
 
\t \t </div> 
 
\t </div>