html - 可以在 div 上创建没有背景图像的视差效果吗？

Question

我知道如何在 div 上使用 background-size 和使用 background-attachment 等创建视差效果，但是如果我有看起来像这样的代码(由 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() {
			$('.backstretch').each(function(index, el) {
				var img = $(el).children('img');
				$(el).css('background', 'url(' + img.attr('src') + ') 50% 50% / cover fixed');
				img.remove();
			});
		});

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

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