Question

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

我有一个已经设置了背景图像的 div，我想添加一个背景渐变，背景混合模式为乘法。这样当一个人上传背景图片时，它会自动以上面的渐变呈现，不需要 Photoshop 手动添加。

现在我在这一点上：

我获取当前的背景图片 url 并将其存储在一个变量中
我使用 jquery 设置了 css 以添加该背景图像 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

<块引用>

工作演示：https://jsfiddle.net/yhde4xfa/

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

$(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 向现有背景图像添加背景渐变

2 个答案: