Question

我正在尝试将一些CSS应用于网页背景，但我不知道该怎么做。我有一个脚本，当有人点击按钮时，它会更改背景图像。但是，图像不是按比例缩放的，并且尺寸不正确。我想为图像添加一些样式，但不知道在哪里这样做。我想补充一下：

background:url(Pic/jungle.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
          background-size: cover;

进入每张图片。所以当有人点击一个按钮时，它的单个图像非常适合屏幕。有没有人对我在将这些样式添加到背景图像方面有什么建议？感谢您的时间和帮助。

    <!DOCTYPE html>
<html>
   <style>
      body 
      {
      background-image:url(Pic/jungle.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      }
   </style>
   <body>
      <button class="color" style="background-image: url('Pic/changebackground.png'); width:60px; height: 50px;background-repeat:no-repeat;background-color: transparent;border:none;"></button>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
         $(document).ready(function () {
              var rotate = 0;
              var colors = ["url('Pic/hi.jpg')", "url('Pic/jungle.jpg')"];
              $('body').on("click", function () {

                  $(this).css({
                      'background-image': colors[rotate]
                  });
                  rotate++;
                  if (rotate >= 2) {
                      rotate = 0;
                  }     

              });   
          });

      </script>
   </body>
</html>

Answer 1

使用$（this）.css（＆＃39; background＆＃39;）完全覆盖background-property。请尝试使用背景图片。

HTML，jquery在显示时调整图像大小

1 个答案: