¿Es posible agregar un fondo CSS3 con clases/estilos adicionales?

Question

Hoy aprendí que CSS3 admite multiple backgrounds, lo cual es increíble. Lo que realmente me gusta es la capacidad de combinar múltiples antecedentes sobre la marcha, EG:

.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;"> 
... 

produce alguna manera el estilo computarizada:

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

De Por supuesto, puedo codificar el estilo de fondo adicional o agregarlo usando jquery. Estoy buscando esa solución dulce, pura y exclusiva de CSS.

respondió

Aceptado thirtydot para el CSS puro respuesta- "no se puede".

Vale la pena destacar que si se trabaja con SASS (Rails 3.1, etc), los estilos no modificables son más apetecibles a través del uso de variable:

$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

No se puede hacer eso con CSS.

Cualquiera que sea background se declara con mayor specificity se completamente anular el otro.

Answer 2

PRERREQUISITO

1. width de la div = anchura de la img - border-image anchura img
2. height de la div = altura de la img - border-image altura img
3. border-image altura img = border-bottom-width
4. border-image img width = border-right-width
5. su imagen frontera debe ser transparente (claro)

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 alternativa

---

REQUISITO

1. border-bottom-width = altura logo.png
2. border-right-width = logotipo.png Ancho
3. su imagen frontera debe ser transparente (opcional)

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

selectores Pseudo: before o: after se puede utilizar para añadir una nueva capa de fondo

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