Question

我知道如何在div上使用background-size创建视差效果并使用背景附件等，但如果我有代码（由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>

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

1 个答案: