我已经为网页中的单个 div 提供了多个背景。我希望当我向下滚动时，位于前面的背景图像 (Stickman) 应保持相同大小，而位于其后面的背景图像 (Landscape) 应缩放。 我想让火柴人的尺寸小于容器的尺寸。
但是在我的代码中，两个背景图像都被放大了，请帮助我。
代码如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<meta charset="utf-8">
<script>
$(document).ready(function(){
$(window).scroll(function(){
var up=$(document).scrollTop();
var upperl=10;
var lowerl=500;
var a=0;
var b=$("#body1").width();
if(up<=upperl)
{
a=b;
}
else if(up>=upperl)
{
a=b+up;
}
$("#backgroundslide").css("background-size", a+"px");
});
});
</script>
<style>
body{
color:white;
top:0;
margin:0;
}
#body1{
width:100%;
height:880px;
position:relative;
}
#backgroundslide{
background-image:url("http://www.downloadclipart.net/svg/18970-stickman-tired-svg.svg"),url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width:100%;
height:100%;
background-size: 200px,cover;
background-repeat:no-repeat;
background-position: bottom, top;
}
#a{
margin-top:100px;
}
</style>
</head>
<body>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>
</body>
</html>最佳答案
您刚刚忘记为火柴人设置值。
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
请看下面的片段:
$(document).ready(function() {
$(window).scroll(function() {
var up = $(document).scrollTop();
var upperl = 10;
var lowerl = 500;
var a = 0;
var b = $("#body1").width();
if (up <= upperl) {
a = b;
} else if (up >= upperl) {
a = b + up;
}
$("#backgroundslide").css("background-size", '200px auto,' + a + "px");
});
});body {
color: white;
top: 0;
margin: 0;
}
#body1 {
width: 100%;
height: 880px;
position: relative;
}
#backgroundslide {
background-image: url("https://svgsilh.com/svg_v2/151822.svg"), url("http://miriadna.com/desctopwalls/images/max/Silver-cliff.jpg");
width: 100%;
height: 100%;
background-size: 200px auto, cover;
background-repeat: no-repeat;
background-position: bottom, top;
}
#a {
margin-top: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="body1">
<div id="backgroundslide">
<h1>This is Heading</h1>
<p id="a">Irure pariatur et est ullamco fugiat ut. Duis incididunt sint non nostrud ut enim irure veniam. Veniam veniam cillum Lorem adipisicing laboris id esse ullamco deserunt. Incididunt duis adipisicing anim sit nisi qui magna nisi nulla.</p>
</div>
</div>关于javascript - 如何使用jquery更改单个div元素的多个背景的尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54161847/