是否可以附加带有其他类/样式的CSS3背景？

Question

今天我学会了CSS3支持多种背景,这很棒.我真正喜欢的是能够动态组合多个背景,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;">
...

以某种方式产生计算的样式:

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

当然,我可以硬编码额外的背景样式或使用jquery添加它.我正在寻找那种甜美,纯粹,仅限CSS的解决方案.

回答

接受thirtydot的纯CSS答案 - "你不能".

值得强调的是,如果您正在使用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 */;
}