Question

我有内联CSS，后台网址是在循环中动态生成的。

我想在背景图片中添加线性渐变，但我能做到的唯一方法就是在背景网址旁添加linear-gradient。

我想删除linear-gradient并将其添加到我的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>

编辑我创建了一个新课程item-wrapper并将linear-gradient置于其中，就像这样

.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;
}

然后，我将div.item包裹在div.item-wrapper内，但它没有改变任何内容，渐变消失了。并且添加伪选择器before和after不会改变任何内容。

Answer 1

您可以在主元素上使用一个背景，然后在伪元素上使用另一个背景。

＆＃13;

<video id="music1" src="playlist/leggere0.mp4"> </video>

＆＃13;

div {
  height: 100vh;
  position: relative;
  background-repeat: no-repeat;
}

div:before {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), rgba(0, 149, 219,0.7));
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

＆＃13;

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

1 个答案: