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

【问题标题】：How to add background-image and linear gradient Jquery?如何添加背景图像和线性渐变 Jquery？
【发布时间】：2023-03-31 08:35:02
【问题描述】：

我想通过 JQuery 添加下面的背景图像 css 属性，图像的链接和线性渐变。即使只是链接对我不起作用

.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')
  });
})

【问题讨论】：

$('.dnow-video-container').css('background-image','url("/Images/chicago.jpg")');选择器中不需要 _self。
或者为什么不 $('.dnow-video-container').addClass("product-video-container");
图片链接将来自后端，所以必须将图片url放在js中，我还需要将线性渐变也放在那里@HastaTamang。由于具有相同类但具有不同图像的多个组件将在一个页面上进行自我操作。
你能发布你的html吗？

标签： javascript jquery html css

【解决方案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/）

【讨论】：

我添加了这个，因为在同一页面上会有多个类似的组件具有不同的图像，但这是不同的故事。
已更新：可以查看您需要如何在实际代码中使用 this 并删除它会混淆问题。这个答案的重点是要强调你实际上在做$(".-section .container .container") 这似乎不对，也许是因为你没有包含你的html。问题代码中每个循环中的选择器将找不到任何内容。
是的，我也应该添加 html。但我明白你在说什么

【解决方案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) 用于多个类。

【讨论】：

必须修复链接上的“to ”并丢失）

【解决方案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")');
  });

  });

【讨论】：

.each 然后不使用this？ .each 是干什么用的？
没有线索，伙计。从OP复制并粘贴，急于先发布答案..大声笑
这很公平:)