Question

我有一种内联样式，该样式将具有线性渐变叠加层的背景图像应用于包含的div。背景图片是动态的，因此我无法知道源URL是什么。我也无权更改正在生成标记的脚本。如何仅更改线性梯度的值？我在想我可能需要从嵌入式样式中提取图像URL，然后将样式设置为我需要的样式？

<div id="top" class="masthead" role="main" style="height:120vh;background: linear-gradient(
      rgba(0, 0, 0, 0.7), 
      rgba(0, 0, 0, 0.7)
    ),url('my-dynamic-image.jpg');background-size: cover;"></div>

这可行，但是很难看...清理这个有什么想法吗？

$( document ).ready(function() {
	var bg = $("#top").css("background");
	bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '');
  $("#top").css({"background" : "linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(" + bg + ")", "background-size" : "cover"});
});

Answer 1

我将渐变背景设置为变量，并且每次背景图像更改时，我都会合并值并再次设置css。这是一个简单的主意：

let myNewPicture = "url(/some_value_from_something)";
let bgGradient =  "linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)";
let newBg = myNewPicture+','+bgGradient;
$('#top').css('background',newBg);

请记住，首先要使背景属性中的图像不被渐变隐藏。

jQuery：以内联样式仅更改背景图像上的线性渐变

1 个答案: