css - 是否可以为 CSS3 背景添加额外的类/样式？

Question

今天学习了CSS3支持multiple backgrounds ，太棒了。我真正喜欢的是动态组合多个背景的能力，例如:

.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 的解决方案。

已回答

接受了 thirddot 的纯 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 做到这一点。

用更高的 specificity 声明哪个 background将完全覆盖另一个。