背景グラデーションの色と背景イメージDRYly

Question

私はいくつかの見出しがあり、それぞれの背景に同じグラデーションの色を表示したいが、異なる（反復しない）背景イメージを表示したい。バックグラウンドのグラデーションの色や背景の画像位置のCSSルールを複製しないようにしたいのは、それぞれの見出しで同じになるからです。つまり、個々の見出しに指定する必要があるのは、背景イメージファイルへのパスだけです。ここで

は私が現時点で持っているものです。

<h1 class="banner bgImage img1">background image 1</h1> 
<h1 class="banner bgImage img2">background image 2</h1> 
<h1 class="banner bgImage img3">background image 3</h1> 
<h1 class="banner">heading without background image</h1> 

.banner { 
    /* For old browsers that don't support gradients */ 
    background-color: #9FCC1D; 

    /* browser-specific prefixes omitted */ 
    background-image: linear-gradient(#75A319, #9FCC1D); 
    padding: 7px 7px 7px 15px; 
} 

/* Specifies position of background image */ 
.bgImage { 
    background-position: 5px 50%, 0 0; 
    background-repeat: no-repeat; 
    padding-left: 30px; 
} 

.img1 { 
    background-image: url(img1.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img2 { 
    background-image: url(img2.png"), linear-gradient(#75A319, #9FCC1D); 
} 

.img3 { 
    background-image: url(img3.png"), linear-gradient(#75A319, #9FCC1D); 
} 

私はそれはdoesnの

各.imgXルールでlinear-gradientスタイルを繰り返す必要があり、この

1. の問題点がいくつかありますChromeで正しくレンダリングされません。background-imageとbackground-repeatというコンマで区切られたリストはサポートされていないようです。これは、クローム
私はCSSルールの重複を最小限に抑えながら、背景はChromeでレンダリングされている方法で問題を解決するにはどうすればよい

に表示されます何ですか？

Answer 1

背景アイコンには疑似クラス:beforeを使用してください。

.img1:before { 
    content: ''; 
    float: left; 
    position: relative; 
    background: transparent url('img1.png') left top no-repeat; 
    width: 16px; /* change to actual width of img */ 
    height: 16px; /* change to actual height of img */ 
} 

または、CSSの量を減らそうとしているため、グラデーションのクラスを指定してHTMLに追加することができます。

Answer 2

ドンには、この背景グラジェントを適用できる2つのクラス、bgImageおよびbannerがあります。これらのクラスの1つにグラデーションを適用し、そこから移動するだけです。また、画像URLの直後にrepeat-xを追加して、それが確実に繰り返されるようにしてください。