Question

我为网页中的一个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>

Answer 1

您只是忘了为火柴人设置一个值。

$("#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>

如何使用jQuery更改单个div元素的多个背景的尺寸

1 个答案: