线性渐变不适用于 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 中设置样式，而不是向样式表添加样式。我已经在下面对此进行了评论，您可以看到它有效。

正如其他人指出的那样，您的供应商前缀也错误。有关该主题的更多信息，请参阅使用 javascript 设置供应商前缀的 CSS 。

但请注意，对多个 CSS 背景的支持可以追溯到 IE 9，因此您可能根本不需要前缀。

需要注意的一件事是，由于除了 之外，您没有在 JS 中设置任何其他背景属性，因此background-image最好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>