是否可以在CSS3背景上附加其他类/样式？

问题描述

| 今天，我了解到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答案的三十点-“您不能\”。 值得强调的是，如果您使用的是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;
}

    

解决方法

        CSS无法做到这一点。 以更高的特异性声明的任何“ 4”将完全覆盖另一个。     ,        伪选择器：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 */;
}

    ,        前提条件 div的

width

= img的宽度-

border-image

img宽度 div的

height

= img的高度-

border-image

img高度

border-image

img高度=

border-bottom-width

border-image

img宽度=

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

替代 前提条件

border-bottom-width

= logo.png高度

border-right-width

= logo.png宽度 您的边框图像必须是透明的（可选） 的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;
}