インラインCSSからリニアグラジエントをリファクタリングして削除する方法

Question

ループ内で動的に生成されるバックグラウンドURLを持つインラインCSSがあります。

バックグラウンドイメージに線形グラデーションを追加したいのですが、これを行うにはバックグラウンドURLの横にlinear-gradientを追加するしかありません。

linear-gradientを削除してに追加して、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> 

EDIT私は新しいクラス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-wrapper内div.itemを包んだが、それは何も変更しませんでした、勾配なくなっている。また、擬似セレクタbeforeとafterを追加しても何も変更されません。

Answer 1

メインエレメントではバックグラウンドを1つ、擬似エレメントではバックグラウンドを使用できます。あなたはCSSファイルに自動処理を適用する必要があります

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>