如何使用jQuery在基于类的内联样式中插入第二个背景？

我搜索了这个问题，但没有找到它，任何帮助将不胜感激

我有一个header div，它有一个名为dynamic的背景图像，因此使用style属性将背景图像称为inline。我需要在上面有第二个背景，一个css渐变的顶层，所以我需要使用css多个背景。但是我有两种渐变颜色的选择，黑色渐变还是白色渐变，这取决于照片主要是亮的还是暗的。因此，当管理员设置页面时，他们会上传照片，然后决定是否需要在顶部设置明暗渐变。这是由ACF字段完成的。他们决定了这一点，代码中添加了一个类“light”或“dark”

这是我的密码：

<section id="header-block" style="background-image: url(<?php echo $feat_image[0]; ?>);" class="<?php if( get_field('header_theme') == 'dark' ): ?>dark<?php elseif( get_field('header_theme') == 'light' ): ?>light<?php endif; ?>">

如果类别为“暗”或：

linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), 

如果类是“light”

结果（一个例子）是：

<section id="header-block" style="background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), url('/path/to/image.jpg');" class="dark">

---

我该怎么做呢？

我会在该块上使用一个伪元素来进行覆盖

#标题块{
位置：相对位置；
/*你不需要这个高度/宽度，只是为了我的演示*/
宽度：560像素；高度：400像素；
}
#标题栏：之后{
内容：''；
位置：绝对位置；
顶部：0；左侧：0；右侧：0；底部：0；
}
#标题栏。指示灯：之后{
背景图像：线性梯度（向右，rgba（255255,95）0%，rgba（255255,6）50%，rgba（255255,0）70%）；
}
#标题栏。黑暗：之后{
背景图像：线性梯度（向右，rgba（0,0,0,8）0%，rgba（0,0,0,4）50%，rgba（255255,0）70%）；
}

---

您可以像Michael Coker所说的那样使用pseudo，但要使用jQuery实现这一点，您可以使用：

$（“.dark，.light”）。每个（函数（）{
$this=$（this）；
back=$this.css（“backgroundImage”）；
if（$this.hasClass（'dark'））{
lin=“线性梯度（向右，rgba（255255.95）0%，rgba（255255.6）50%，rgba（255255.0）70%，”
}else if（$this.hasClass（'light'））{
lin=“线性梯度（向右，rgba（0,0,0,8）0%，rgba（0,0,0,4）50%，rgba（255255,0）70%）；
}
$this.css（“backgroundImage”，lin+back）
})

.light bk{
背景图像：线性梯度（向右，rgba（255255,95）0%，rgba（255255,6）50%，rgba（255255,0）70%）；
}
.dark bk{
背景图像：线性梯度（向右，rgba（0,0,0,8）0%，rgba（0,0,0,4）50%，rgba（255255,0）70%）；
}

Ahhh有趣的想法！我打算试试。我决定使用下面的jQuery版本，但谢谢你，我从你那里学到了一些东西@艾莉森：不客气。我很好奇为什么？CSS的性能远比使用jQuery好得多。我看到了两种方法都能带来好处，出于某种原因，我把心思放在了jQuery上。我将在general CSS>javascript>jquery中重新评估@AlisonCohn。CSS基本上在浏览器中自动发生，没有逻辑或不必要的代码或任何东西。Javascript更好，但对于您选择的答案，它只是在代码中循环，并应用CSS。浏览器已经检查了代码，所以Javascript也检查代码是多余的。然后他们正在编写javascript来应用CSS。。。当你可以使用CSS的时候。jQuery的效率甚至更低。它需要整个jQuery库，jQuery将运行Javascript，然后JS将应用CSS。我会写CSS:）

<section id="header-block" style="background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), url('/path/to/image.jpg');" class="dark">