jQueryを使用して、クラスに基づいてインラインスタイルに2番目の背景を挿入するにはどうすればよいですか？

Question

この問題を検索しましたが見つかりませんでした。何か助けていただければ幸いです。

私は動的に呼ばれる背景イメージを持つヘッダーdivを持っているので、背景イメージはstyle属性を使用してインラインと呼ばれます。私はそれの上に2番目の背景、CSSのグラデーションのトップレイヤーが必要なので、私はCSSを複数の背景を使用する必要があります。しかし、写真が主に明るいか暗いかによって、グラデーションカラー、黒いグラデーション、または白いグラデーションの2つの選択肢があります。管理者がページを設定しているときに、写真をアップロードし、上に明るいまたは暗い勾配が必要かどうかを決定します。これは、ACFフィールドによって行われます。彼らはこれを決定し、コードには「軽い」または「暗い」クラスが追加されています。ここで

は私のコードです：

<section id="header-block" style="background-image: url(<?php echo $feat_image[0]; ?>);" class="<?php if(get_field('header_theme') == 'dark'): ?>dark<?php elseif(get_field('header_theme') == 'light'): ?>light<?php endif; ?>"> 

だから私はクラスが '「光」またはであるかどうかに基づいて、スタイル属性で「URL」の前に文字列として挿入される第2の線形グラデーション背景である必要がありますダーク'。

ので挿入します

linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), 

をクラスが '暗い' かである場合：クラスは '光' である場合

linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), 

。

結果（一例）は次のようになります。

<section id="header-block" style="background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), url('/path/to/image.jpg');" class="dark"> 

私はこれをどのように行うのですか？

Answer 1

あなたはマイケル・コーカーは述べたように、擬似を使用することができますが、使用するjQueryのを使用して、これを達成するために：

$(".dark, .light").each(function() { 
 
\t $this = $(this); 
 
    back = $this.css("backgroundImage"); 
 
    
 
    if ($this.hasClass('dark')) { 
 
    \t lin = "linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%), " 
 
    } else if ($this.hasClass('light')) { 
 
    \t lin = "linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%), "; 
 
    } 
 
    
 
    $this.css("backgroundImage", lin + back) 
 
    
 
})

.light-bk { 
 
    background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%); 
 
    } 
 

 
.dark-bk { 
 
    background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section style="background-image: url('/path/to/image.jpg');" class="js-addBG dark">

（コードを点検結果を見る）

JSfiddle

Answer 2

私はそのブロック上に擬似要素を使用してオーバーレイを作成します。

#header-block { 
 
    position: relative; 
 
    /* you don't need this height/width, just for my demo */ 
 
    width: 560px; height: 400px; 
 
} 
 

 
#header-block:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 

 
#header-block.light:after { 
 
    background-image: linear-gradient(to right, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 70%); 
 
} 
 

 
#header-block.dark:after { 
 
    background-image: linear-gradient(to right, rgba(0,0,0,.8) 0%, rgba(0,0,0,.4) 50%, rgba(255,255,255,0) 70%); 
 
}

<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="dark"> 
 
</section> 
 

 
<section id="header-block" style="background-image: url(http://kenwheeler.github.io/slick/img/fonz1.png);" class="light"> 
 
</section>