css JQuery |使用 CSS 属性设置背景图像

JQuery |使用 CSS 属性设置背景图像

原文:https://www . geesforgeks . org/jquery-设置-背景-图像-使用-css-property/

要使用 CSS 属性设置背景图像，我们使用。jQuery 的 css()方法。要理解例子首先要理解方法。

JQuery。css()方法: 此方法为指定元素设置 / 返回一个或多个样式属性。

语法:

返回一个 CSS 属性:

$(selector).css("propertyname");

Set a CSS property:

```html $(selector).css("propertyname", "value");

```

示例-1: 在本例中，使用 JQuery 的由背景图像属性设置背景图像。css()方法。

```html <!DOCTYPE html>

             JQuery |       Setting background-image using CSS property.                   #div {             background-repeat: no-repeat;             margin-left: 120px;         }



                    GeeksForGeeks

            This is text of the div box, .

                     click to set


             $('button').on('click', function() {             $('#div')                 .css('background-image',                     'url(' + 'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png'                      + ')'                 );             $('h1').css('color', 'black');         });
```

输出:
- 点击按钮前:
- 点击按钮后:
示例-2: 在本例中，背景图像和背景重复属性由背景属性使用 JQuery 的设置。css()方法。

```html <!DOCTYPE html>

             JQuery       | Setting background-image using CSS property.                   #div {             margin-left: 120px;         }



                   GeeksForGeeks

            This is text of the div box, .

                     click to set


             $('button').on('click', function() {             $('#div')                 .css('background', 'url(' + 'https://media.geeksforgeeks.org/wp-                 content / uploads / 20190515121004 / gfgbg1.png '+ '                     ) no - repeat '         ); $('h1').css('color', 'black');         });
```

输出:
- 点击按钮前:
- 点击按钮后: