如何添加背景圖像和線性漸變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...

即查找.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")');
  });

  });