Je veux ajouter la propriété css de background-image ci-dessous, à la fois lien de l'image et gradient linéaire via JQuery. même si le lien ne fonctionne pas pour moi
$(document).ready(function () {
$(".product-video-section .product-video-container").each(function () {
var _self = this;
$('.product-video-container',_self).css('background-image', './Images/chicago.jpg')
});
})
ma tentative est la suivante:
.product-video-container {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/chicago.jpg");
}
3 Réponses :
Lorsque vous utilisez plusieurs arrière-plans, gardez à l'esprit qu'ils sont traités comme une pile. La première propriété sera en haut et la seconde en dessous. Dans votre exemple, le dégradé apparaîtra en haut et l'image apparaîtra en bas. Voici comment vous pouvez implémenter un arrière-plan empilé en utilisant la méthode CSS dans jQuery:
$(document).ready(function(){
$(".background").css("background-image", "linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../Images/chicago.jpg");
});
Remplacez ".background" par votre classe ou utilisez (this) .find (.class) pour plusieurs classes.
a dû corriger le "à" sur le lien et manquant)
$(document).ready(function () {
$(".product-video-section .product-video-container").each(function () {
$('.product-video-container').css('background-image', 'linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1)), url("../Images/chicago.jpg")');
});
});
.each et ne pas utiliser ceci ? À quoi sert le .each ?
Aucun compagnon d'indice. Copié et collé à partir d'OP, était pressé de poster une réponse en premier .. lol
c'est assez juste :)
Ce code:
$(document).ready(function () {
$(".product-video-section .product-video-container").each(function () {
var _self = this;
$(_self).css('background-image', '../Images/chicago.jpg')
});
})
est l'équivalent de:
<div class='product-video-section'> <div class='product-video-container'> </div> </div>
ie recherche .product-video-container en tant que descendant de this - comme this est déjà un .product-video-container cela signifierait que votre html devrait être :
<div class='product-video-section'>
<div class='product-video-container'>
<div class='product-video-container'>
</div>
</div>
</div>
ce qui semble peu probable.
En supposant que vous ayez:
$(this).find('.product-video-container').css...
Conserver le .each et _self qui sont utilisés ailleurs dans l'application (code non lié, mais pertinent pour OP), vous pouvez utiliser:
$('.product-video-container', this).css...
(également changé en chemin ../Images/)
J'ai ajouté ceci, car il y aura plusieurs composants comme celui-ci sur la même page avec des images différentes, mais c'est une histoire différente.
Mise à jour: pouvez voir comment vous auriez besoin d'utiliser this dans votre code réel et le supprimer compliquerait le problème. Le but de cette réponse est de souligner que vous faites réellement $ (".- section .container .container") ce qui ne semble pas correct, peut-être parce que vous n'avez pas inclus votre html. Le sélecteur dans chaque boucle du code de la question ne trouvera rien.
ya j'aurais dû ajouter le html aussi. mais j'ai ce que tu dis
$ ('. dnow-video-container'). css ('background-image', 'url ("/ Ima ges / chicago.jpg")'); Vous n'aurez pas besoin de _self dans le sélecteur.
Ou pourquoi pas $ ('. Dnow-video-container'). AddClass ("product-video-container");
le lien de l'image viendra du back-end, donc je dois mettre l'url de l'image dans le js, j'ai également besoin de mettre le dégradé linéaire là aussi @HastaTamang. faire soi-même en raison de plusieurs composants avec les mêmes classes mais avec des images différentes serait sur une page.
Pouvez-vous publier votre HTML?