Можно ли добавить фон CSS3 с дополнительными классами / стилями?

Question

Сегодня я узнал, что CSS3 поддерживает несколько фонов , что потрясающе.Что мне действительно нравится, так это возможность комбинировать несколько фонов на лету, например:

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

Каким-то образом получается вычисленный стиль:

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

Конечно, я могу жестко закодировать дополнительный стиль фона или добавить его с помощью jquery.Я ищу это милое, чистое решение, предназначенное только для CSS.

ответил

Принято тридцать точек за чистый ответ CSS - "Вы можете"t ".

Стоит подчеркнуть, что если вы работаете с 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 не был объявлен с более высокой специфичностью будет полностью перекрывать другой.

Answer 2

Псевдоселекторы: before или: after могут использоваться для добавления нового фонового слоя

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

Answer 3

PREREQUISITE

1. width div = ширина изображения - border-image img width
2. height div = высотаизображения - border-image высота изображения
3. border-image высота изображения = border-bottom-width
4. border-image ширина изображения = border-right-width
5. изображение вашей границы должно бытьпрозрачный (очевидный)

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 = logo.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;
}