CSS3の背景に追加のクラス/スタイルを追加することはできますか？

Question

今日、私はCSS3がmultiple backgroundsをサポートすることを学びました。これは素晴らしいものです。 私が本当に欲しいことは、その場でEGを複数の背景を組み合わせる能力です：

.Watermarked{ 
    background: url('text/logo.png') bottom right no-repeat; 
} 

HTML：の

background: url('text/logo.png') bottom right no-repeat, 
      url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;  

：

<div class="Watermarked" 
    style="background:url('photos/very_pretty_sunset.jpg') 0 0 no-repeat;"> 
... 

はどういうわけか、計算されたスタイルを作り出しますもちろん、余分なバックグラウンドスタイルをハードコードすることも、jqueryを使って追加することもできます。私はその甘く純粋なCSS専用ソリューションを求めています。

は

は、純粋なCSSのためthirtydotを受け入れ答えanswer- "あなたがすることはできません"。

それはあなたがSASS（Railsの3.1など）で作業している場合は、ハードコーディングされたスタイルは、変数の使用を通じて、よりおいしいであることを強調し価値がある：

$watermarkImage: url('text/logo.png') left top no-repeat; 
... 
#very_pretty_sunset{ 
    background: $watermarkImage, url('photos/very_pretty_sunset.png') right bottom no-repeat; 
} 

Answer 1

あなたはCSSでそれを行うことはできません。どちらbackground

はは完全に別のものを上書きしますspecificity高いと宣言されています。 DIVのborder-image IMG幅

height = IMGの高さ - - border-image IMG高

border-image IMG高さ= border-bottom-width IMGのDIV =幅の

Answer 2

PREREQUISITE（条件）

1. width
2. border-image img width = border-right-width
3. あなたの境界画像は、（明らか）透明でなければならない

CSS

.Watermarked { 
    -moz-border-image: url('text/logo.png') 0 100% 100% 0; 
    -webkit-border-image: url('text/logo.png') 0 100% 100% 0; 
    -o-border-image: url('text/logo.png') 0 100% 100% 0; 
    border-image: url('text/logo.png') 0 100% 100% 0; 
} 

---

box-sizing代替

---

PREREQUISITE（条件）

1. border-bottom-width = logo.png高さ
2. border-right-width =ロゴ。pngの幅
3. は、あなたの境界画像（オプション）

CSS

.Watermarked { 
    -moz-border-image: url('text/logo.png') 0 100% 100% 0; 
    -webkit-border-image: url('text/logo.png') 0 100% 100% 0; 
    -o-border-image: url('text/logo.png') 0 100% 100% 0; 
    border-image: url('text/logo.png') 0 100% 100% 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing:  border-box; 
} 

Answer 3

擬似セレクター透明でなければならない：新しい背景レイヤー

/* This is your element that needs an additional background */ 
.myElement { 
    position: relative; 
    z-index: 1; 
} 
/* This is your background layer */ 
.myElement:before { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: /* Define your bg */; 
} 

を追加するために使用することができます後：前か