我如何重构和删除线内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-wrapperdiv.item但它并没有改变什么，渐变离开了。并且添加伪选择器before和after不会改变任何内容。

来源

2017-05-08 Halnex

你需要到自动处理应用到CSS文件。 – Phix

您可以添加另一个包装来包含背景图像或渐变（或者使元素创建堆叠上下文，并使用'z-index：-1'添加':: before'）。 – Ryan

我创建了一个新的类“item-wrapper”，并在其中放置了背景渐变。然后将'div.item'封装在'div.item-wrapper'里面，但那不起作用。 – Halnex

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

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

<div id="div" style="background-image: url(http://kenwheeler.github.io/slick/img/lazyfonz2.png)"></div>

来源

2017-05-08 18:48:10

我如何重构和删除线内CSS的线性渐变

回答

相关问题