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

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/)