带有内联和在CSS文件中的带有渐变的CSS参数化滑动背景

Question

以下HTML标记正按预期方式呈现。

style='background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1)), url(<%= image_path "/bg/#{@this_area.id}.svg" %>);'>

但是，由于这是通过变量动态管理的，因此目标是添加

@keyframes moveBg {
    to {
        background-position: 100% 0;
    }
}

我正在尝试执行以下操作

<div class='bg_x' style='background: url(<%= image_path "/bg/#{@this_area.id}.svg" %>);'>

并定义类

.bg_x {
  background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1))
  animation: moveBg 20s linear infinite;
}

但是使用类加上内联定义无法将渐变与背景图像集成在一起（甚至在添加动画之前）。因此，即使说明是互补的，内联函数仍会覆盖该类。

由于CSS文件不能接受变量，可以部分地not内联实现此期望的效果吗？

Answer 1

由于[[C SS中的级联，所以内联确实否定了该类。永远不会少。线性渐变是background-image属性的一部分（如果想组合多种样式，则简称background，就像margin-left和margin一样。）>在下面的示例中，您可以找到我找到的两个解决方案。希望这可以帮助您解决此问题。

/* ClassBased */
.bg_classBased {
  position: relative;
}

.bg_classBased:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1));
  width: 100%;
  height: 100%;
}

/* Animation */
.bg_x {
  animation: moveBg 20s linear infinite;
}

@keyframes moveBg {
    to {
        background-position: 100% 0;
    }
}

/* misc styling */
div {
  padding: 40px;
}

<h1>inline based</h1>
<div class="bg_x" style='background: linear-gradient(to right, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 30%, rgba(255,255,255,1)), url("https://placehold.it/100x100");'></div>

<h1>Classbased based</h1>
<div class="bg_x bg_classBased" style='background: url("https://placehold.it/100x100");'></div>