Html 如何从内联CSS中重构和删除线性渐变

我在一个循环中动态生成了带有背景url的内联CSS

我想给背景图像添加一个线性渐变，但我唯一能做的就是在背景url旁边添加线性渐变

我想删除线性渐变并将其添加到我的app.css中，以便在保留url内联的同时应用于元素

我有没有办法做到这一点

<div class="item cultureHeight" style="
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7)), url('assets/img/carousel/4.jpg') center center / cover;
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7)), url('assets/img/carousel/4.jpg') center center / cover;
     background: -o-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7)), url('assets/img/carousel/4.jpg') center center / cover;
     background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7)), url('assets/img/carousel/4.jpg') center center / cover;
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 149, 219,0.7))), url('assets/img/carousel/4.jpg') center center / cover;
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7)), url('assets/img/carousel/4.jpg') center center / cover;
  ">
  <div class="row vflex">
    <div class="col-md-8 vcenter">
      <div class="item-content bottom">
        <div class="post-meta-top">
          <span class="label label-primary post-category">سياسة</span>
          <span class="post-reading"><i class="fa fa-clock-o"></i> 2</span>
          <span class="post-location"><i class="fa fa-map-marker"></i> لبنان</span>
        </div>
        <div class="post-title"><h4><a href="article.html">إدارة أوباما تستعد لفرض أول عقوبات ضد إيران منذ الاتفاق النووي</a></h4></div>
        <div class="post-description">كشفت صحيفة "وول ستريت جورنال" اليوم عن اعتزام إدارة الرئيس الأمريكي باراك أوباما فرض عقوبات اقتصادية ضد إيران منذ إبرام اتفاق برنامج طهران النووي في يوليو</div>
        <div class="post-meta-bottom">
          <span class="post-bookmark"><a href="#"><i class="fa fa-bookmark-o fa-2x"></i></a></span>
          <span class="post-author"><a href="#">جاد أبو ذكي</a></span>
        </div>
      </div>
    </div>
  </div>
</div>

---

然后，我在div.item-wrapper中包装了div.item，但它没有改变任何东西，渐变消失了。在主元素上使用一个背景，然后在伪元素上使用另一个背景

div{ 高度：100vh； 位置：相对位置； 背景重复：无重复； } 部门：以前{ 背景图像：底部线性渐变，rgba0,0,0,0.0，rgba0,149,219,0.7； 内容：； 位置：绝对位置； 顶部：0；左侧：0；右侧：0；底部：0； }

---

您需要将自动处理应用于CSS文件。您可以添加另一个包装以包含背景图像或渐变，或者让元素创建堆叠上下文并添加一个：：before with z-index:-1。我创建了一个新的类项包装，并将背景渐变放在其中。然后将div.item包装在div.item-wrapper中，但这不起作用。或者你可以在CSS中使用一个伪元素作为渐变，并通过JS@michaelocker应用图像bg。第二支笔真的很有用。我只是需要调整一下以适应我的需要。非常感谢。请张贴答案，以便我选择它。

.item-wrapper {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
      background: -o-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
      background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), to(rgba(0, 149, 219,0.7)));
      background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
      width: 100%;
      z-index: -1;
}