CSSに追加する

Question

私はサイトの背景イメージに線形グラデーションを使用しますが、イメージをランダム化したいので、私は少しのPHPロジックに振りかざす必要があります。

以下を参照してください。

<div class="jumbotron hidden-xs hidden-sm" id="headerhome" style="background: -webkit-linear-gradient(rgba(166, 195, 206, 0.5), 
    rgba(166, 195, 206, 0.5)), 
    linear-gradient(
    to bottom, 
    rgba(64, 64, 64, 0) 70%, 
    rgba(77, 78, 94, 0.5) 80% 
    ), url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -o-linear-gradient(rgba(166, 195, 206, 0.5), 
    rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -moz-linear-gradient(rgba(166, 195, 206, 0.5), 
rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background: -linear-gradient(rgba(166, 195, 206, 0.5), 
rgba(166, 195, 206, 0.5)), 
    url('img/home/hero-img/hero-img-<?php echo $rand ?>.jpg'); 

    background-blend-mode: multiply;"> 

その後、インラインスタイルを持つURLのセグメントを追加し、CSSファイルでheaderhomeためのスタイリングを持ってする方法はあります。

本質的に私はこれを行うための比較的クリーンな方法を見つけようとしています。現在のコードが動作していても、私はそれが維持できないと言われています。

このように、単一のブラウザごとにグラデーションを定義する必要がありますか？

Answer 1

before疑似要素に画像を割り当て、ブラウザのグラデーションセットプロパティごとに実装画像を取り除くことができます。

.container { 
 
    position:relative; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.container:after { 
 
    position:absolute; 
 
    left:0;right:0;top:0;bottom:0; 
 
    content: ""; 
 
    background: url('http://www.emtec-international.com/sites/default/files/sd4-2gb-largesize.png'); 
 
}

<div class="container" style="background: linear-gradient(red, yellow);"> 
 
</div>