Question

我想添加以下background-image css属性，通过JQuery链接图像和线性渐变。即使只是链接对我不起作用

.product-video-container {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/chicago.jpg");
}

我的尝试是这样：

$(document).ready(function () {

  $(".product-video-section .product-video-container").each(function () {
    var _self = this;
    $('.product-video-container',_self).css('background-image', './Images/chicago.jpg')
  });
})

Answer 1

此代码：

$('.product-video-container', this).css...

等效于：

$(this).find('.product-video-container').css...

ie寻找.product-video-container作为this的后代-因为this已经是.product-video-container，这意味着您的html必须是：

<div class='product-video-section'>
  <div class='product-video-container'>
    <div class='product-video-container'>
    </div>
  </div>
</div>

这似乎不太可能。

假设您拥有：

<div class='product-video-section'>
  <div class='product-video-container'>
  </div>
</div>

保留应用程序其他位置使用的.each和_self（无关的代码，但与OP相关），您可以使用：

$(document).ready(function () {
  $(".product-video-section .product-video-container").each(function () {
    var _self = this;
    $(_self).css('background-image', '../Images/chicago.jpg')
  });
})

（也更改为路径../Images/）

Answer 2

使用多个背景时，请记住将它们视为堆栈。第一个属性将位于顶部，第二个属性将位于其下方。在您的示例中，渐变将显示在顶部，图像将显示在底部。这是使用jQuery中的CSS方法实现堆叠背景的方法：

$(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");
});

将“ .background”更改为您的课程，或将（this）.find（.class）用于多个课程。

Answer 3

$(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")');
  });

  });

如何添加背景图像和线性渐变Jquery？

3 个答案: