Question

今天我学会了CSS3支持multiple backgrounds，这很棒。我真正喜欢的是能够动态组合多个背景，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的解决方案。

回答

接受纯粹的CSS答案的thirtydot-“你不能”。

值得强调的是，如果你正在使用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被声明为specificity更高，完全都会覆盖另一个

。

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

width div = img的宽度 - border-image img width
height div = img的高度 - border-image img height
border-image img height = border-bottom-width
border-image img width = border-right-width
您的边框图片必须透明（明显）

<强> 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

border-bottom-width = logo.png height
border-right-width = logo.png width
您的边框图片必须是透明的（可选）

<强> 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;
}

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

3 个答案: