我被一个问题困扰了好几个小时。这是它的要点:
我有一个已经设置了背景图像的 div,我想添加一个背景渐变,背景混合模式为乘法。 这样当一个人上传背景图片时,它会自动以上面的渐变呈现,不需要 Photoshop 手动添加。
现在我在这一点上:
听起来很简单,但它不想在那个背景上添加我的第二个渐变。
这是我目前使用的代码:
$( 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/
非常感谢您的帮助!
答案 0 :(得分:0)
工作演示: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+')'
);
});
答案 1 :(得分:0)
谢谢@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 完成。 感谢您的回答以及这里为初学者提供的优秀社区!