线性渐变不适用于 javascript

Question

我有这个，如果我设置背景并将线性渐变放入 data-src 之前它可以工作，但是当我将其更改为它以支持更多浏览器时，它不再工作了。背景设置为图像，但渐变未显示。发送到控制台的消息是

linear-gradient(to top, rgba(2, 0, 36, .8) 0%, rgba(0, 0, 0, 0) 100%), url( '/static/images/mountain.jpg');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  gradient += (";");

  console.log(gradient);
  slide.style.background = "-moz-" + gradient;
  slide.style.background = "-webkit-" + gradient;
  slide.style.background = gradient;
}

<div class="content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}">

Answer 1

根本问题是您不需要添加分号，因为您是在 JavaScript 中设置样式，而不是向样式表添加样式。我已经在下面评论了这一点，你可以看到它有效。

正如其他人所指出的，您也错误地使用了供应商前缀。有关该主题的更多信息，请参阅Setting vendor-prefixed CSS using javascript。

但请注意，support for multiple CSS backgrounds goes back to IE 9，因此您可能根本不需要前缀。

需要注意的一点是，由于除了background-image 之外，您没有在JS 中设置任何其他背景属性，因此最好始终使用style.backgroundImage，而不是切换到style.background。这将使您可以控制样式表中 background 简写中包含的其他属性。

var slide = document.querySelector('.slide');

var url = "url( '" + slide.dataset.src + "')";

slide.style.backgroundImage = url;
if (slide.dataset.type == 'linear') {
  var direction = slide.dataset.lindir;
  var linstart = slide.dataset.linstart;
  var linend = slide.dataset.linend;

  var gradient = "linear-gradient(" + direction + ", " + linstart + ", " + linend + ")";

  if (!(url == null)) {
    gradient += (", " + url);
  }

  //gradient += (";");

  console.log(gradient);
  slide.style.MozBackground = gradient;
  slide.style.WebkitBackground = gradient;
  slide.style.background = gradient;
}

.slide {
  width: 300px;
  height: 300px;
}

<div class="slide content category cursor-hand has-text-centered load" data-type="linear" data-lindir="to top" data-linstart="rgba(2, 0, 36, .8) 0%" data-linend="rgba(0, 0, 0, 0) 100%" data-src="{{ category.url }}"></div>