使用 jquery 向现有背景图像添加背景渐变

Question

我被一个困扰我几个小时的问题困住了。这是它的要点：

我有一个 div 已经设置了背景图像，我想添加一个背景渐变，背景混合模式为 multiply。这样一来，当有人上传背景图片时，它会自动使用上面的渐变渲染，而不需要 Photoshop 手动添加。

现在我是：

我获取当前背景图片url并将其存储在一个变量中
我将 css 设置为 jquery 以添加背景图像 url 并添加渐变（始终相同）

听起来很简单，但它不想在该背景上添加我的第二个渐变。

这是我目前使用的代码：

$( document ).ready(function() {
var bg = $(".dnd_area-row-4-background-image").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
$('.dnd_area-row-4-background-image').css('background-image', 'url(' + bg+ ')','linear-gradient', '(322deg, rgba(229,27,81,1) 0%, rgba(245,126,32,1) 100%);');
});

https://jsfiddle.net/qh028wf1/

非常感谢任何帮助！

Answer 1

Working Demo: https://jsfiddle.net/yhde4xfa/

你的jquery设置css背景是错误的。正确的语法应该是;

$(document).ready(function() {
    var bg = $(".dnd_area-row-4-background-image").css("background-image")
    bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    $('.dnd_area-row-4-background-image').css(
        'background-image', 
        'linear-gradient(322deg, rgba(229,27,81,1) 0%, rgba(245,126,32,1) 100%), url('+bg+')'
    );
});

Answer 2

谢谢@yeyene，好东西让我找到了覆盖任何其他样式的实际解决方案。在下面为后代张贴：

$(document).ready(function() {
    var bg = $(".dnd_area-row-4-background-image").css("background-image")
    bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    $('.dnd_area-row-4-background-image').css(
        "cssText", "background-image: linear-gradient(322deg, rgba(229,27,81,1) 0%, rgba(245,126,32,1) 100%), url("+bg+")!important"
    );
  
});

这会添加带有 !important 标记的 css，我知道不能像此代码的最新版本那样通过 json 完成此操作。非常感谢您的回答和这里的初学者社区！

使用 jquery 向现有背景图像添加背景渐变

Adding a background gradient to existing background image with jquery

css

jquery

background