如何用jQuery改变背景图片的位置

在这篇文章中，我们将看到如何使用jQuery来改变背景图片的位置。为了改变背景图片的位置，我们将使用css()方法和float属性。

css()方法是用来改变所选元素的样式属性。float属性是用来改变一个元素的正常流动。它定义了一个元素应该如何浮动，并将一个元素放在其容器的右边或左边。

语法:

$(selector).css(float: position)

返回值 。它将返回所选元素的属性值。

在下面的例子中，我们已经创建了一个图像元素和一个按钮。当用户点击按钮时，jQuery css()方法被调用，并在图像上应用float属性来改变其位置。

示例:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change the position of 
        background image using jQuery?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <script>
         $(document).ready(function() {$ ("#position").on('click', function() {
                $("img").css({
                    float: "left",
                      paddingLeft: "200px"
                });
            });
        });
    </script>
</head>
  
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
  
        <h3>
            How to change the position of 
            background image using jQuery?
        </h3>
  
        <input type="button" id="position" 
            value="Change Position" 
            style="padding: 5px 10px;">
        <br><br>
  
        <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png"
            alt="jQuery" width="400" height="250">
    </center>
</body>
  
</html>

输出:

如何用jQuery改变背景图片的位置？