我如何重構和刪除線內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的線性漸變

回答

相關問題