Para configurar la imagen de fondo usando la propiedad CSS, estamos usando el método .css() de jQuery. Para entender el ejemplo, primero comprenda el método.
Método JQuery .css():
este método establece / devuelve una o más propiedades de estilo para los elementos especificados.
Sintaxis:
- Devolver una propiedad CSS:
$(selector).css("propertyname"); - Establezca una propiedad CSS:
$(selector).css("propertyname", "value");
Ejemplo-1: En este ejemplo, la propiedad background- image establece la imagen de fondo usando el método .css() de JQuery .
<!DOCTYPE html>
<html>
<head>
<title>
JQuery |
Setting background-image using CSS property.
</title>
<style>
#div {
background-repeat: no-repeat;
margin-left: 120px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<div id="div">
<h1 style="color: green;">
GeeksForGeeks
</h1>
<p>
This is text of the div box, .
</p>
<br>
<button>
click to set
</button>
</div>
<br>
<br>
<script>
$('button').on('click', function() {
$('#div')
.css('background-image',
'url(' +
'https://media.geeksforgeeks.org/wp-content/uploads/20190515121004/gfgbg1.png'
+ ')'
);
$('h1').css('color', 'black');
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo-2: En este ejemplo, la imagen de fondo y las propiedades de repetición de fondo se establecen mediante la propiedad de fondo usando el método .css() de JQuery .
<!DOCTYPE html>
<html>
<head>
<title>
JQuery
| Setting background-image using CSS property.
</title>
<style>
#div {
margin-left: 120px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<div id="div">
<h1 style="color: green;">
GeeksForGeeks
</h1>
<p>
This is text of the div box, .
</p>
<br>
<button>
click to set
</button>
</div>
<br>
<br>
<script>
$('button').on('click', function() {
$('#div')
.css('background', 'url(' +
'https://media.geeksforgeeks.org/wp-
content / uploads / 20190515121004 / gfgbg1.png '+ '
) no - repeat '
); $('h1').css('color', 'black');
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA