CSSの既存の背景に別の背景画像を追加する方法

Question

最新のブラウザでは、コンマ区切りの複数の背景を要素に追加することができます。その後、私は1つの背景には常に要素に適用され、別のだけにして、私は第二のクラスを追加したいそれはのwonderfull動作し、すべてのだが、状況がしばしばあり

background: url(image1.png) no-repeat left top, url(image2.png) no-repeat right bottom; 

：たとえば、私はこのような2つの背景を定義することができますまたはいくつかの改造者。たとえば、次のコードを入力します。

<style> 
    .one { background: url(image1.png) no-repeat left top; } 
    .two { background: url(image2.png) no-repeat right bottom;} 
</style> 

<div class="one two"></div> 

...両方の背景が適用された要素を返します（上のコードは2番目に戻ります）。

最新のCSSでは、最初のものを完全にコピーせずに2番目のものを追加する方法はありますか？

Answer 1

は、私はあなたが完全に何かをコピーしたくない知っているが、私は2番目のクラスは、基本的にファーストクラスを「上書き」この

.one{ 
    background: url(image1.png) no-repeat left top; 
    } 

.two{ 
    background: url(image1.png) no-repeat left top, 
    background: url(image2.png) no-repeat right bottom; 
} 

ような何かをするだろう。

他のオプションは、LESS（http://lesscss.org/）のような動的なスタイルシート言語を使用することです。ここでは変数を使用できます。 LESSで

、あなたはこのコードは動作しません

@Jasonこの

@twoBackgrounds: url(image1.png) no-repeat left top; 

.one{ 
    @twoBackgrounds; 
    } 

.two{ 
    @twoBackgrounds, 
    background: url(image2.png) no-repeat right bottom; 
} 

Answer 2

ような何かを行うことができます。あなたはこれを使用しなければなりません

Answer 3

これは、前後のような擬似要素で行い、要素に折り返しを追加することができます。ここで

.wrap { 
 
    width:500px; 
 
    height: 500px; 
 
    border:1px solid red; 
 
    position:relative; 
 
} 
 
.one { 
 
    width:100%;height:100%; 
 
    background-image: url(http://dummyimage.com/250x250/dfdbb9/dfdbb9.png); 
 
    background-repeat:no-repeat; 
 
    background-position:left top; 
 
} 
 
.two:after {  
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top:0; 
 
    left:0; 
 
    z-index: -1; 
 
    background-image: url(http://dummyimage.com/250x250/b9d9df/b9d9df.png); 
 
    background-repeat:no-repeat;   
 
    background-position:right bottom; 
 
}

<div class="wrap"> 
 
    <div class="one two"></div> 
 
</div>

jsfiddleです：http://jsfiddle.net/alexut/jz0pm47t/1/