Czy można dołączyć tło CSS3 z dodatkowymi klasami/stylami?

Question

Dziś nauczyłem się obsługi CSS3 multiple backgrounds, co jest niesamowite. Co Naprawdę chciałbym to zdolność do łączenia wielu środowisk na bieżąco, np

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

HTML:

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

Jakoś produkuje styl wyliczona:

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

Of Oczywiście mogę ciężko zakodować dodatkowy styl tła lub dodać go za pomocą jquery. Szukam tego słodkiego, czystego rozwiązania tylko CSS.

odpowiedział

Akceptowane thirtydot w czystym CSS answer- "nie można".

Warto podkreślić, że jeśli pracujesz z SASS (Rails 3.1, etc), twarde kodowane style są łatwiejszym poprzez zmienną użycia:

$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

Nie można tego zrobić z CSS.

Niezależnie background jest zadeklarowana z wyższej specificity będzie całkowicie zastąpić drugiego.

Answer 2

wstępnie wymaganego

1. width div = szerokość img - border-image szerokości IMG
2. height div = wysokość img - border-image wysokości IMG
3. border-image wysokość IMG = border-bottom-width
4. border-image img width = border-right-width
5. Twój granica obraz musi być przejrzysta (oczywiste)

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 alternatywa

---

Warunek

1. border-bottom-width = logo.png wysokość
2. border-right-width = logo.png szerokość
3. Twój granica obraz musi być przejrzysta (opcjonalnie)

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

Pseudo selektorów: before lub: after mogą być wykorzystane, aby dodać nową warstwę tła

/* 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 */; 
}