CSS:是否有当前或建议的方法来设置多个背景的单个图层？

Question

是否有人知道使用纯css改变多层背景的一层的方法？

我一直在寻找,但找不到任何提及当前,甚至提出的未来规范.我的想法说可能不会,但网络是如此巨大,现在我确信某个地方的某个人有信息或链接到这些方面的讨论.

伪css

一个示例实现方式,只是为了说明我的意思.当应用于不同元素时,以下显然会出现优先顺序问题:

.building-texture {
  background: transparent, url(image/building-side.png);
}

.shade-dark {
  background: url(image/shade-dark.png), unchanged;
}

.shade-mid {
  background: url(image/shade-mid.png), unchanged;
}

.shade-light {
  background: url(image/shade-light.png), unchanged;
}

标记

<div class="building-texture shade-dark"></div>

显然,上面有很多解决方法,但没有一个是理想的,特别是当你开始讨论很多不同的"层状态"和许多不同的"纹理"时:

初步解决方案

合并课程

这是最优化的后备,但是当您开始考虑供应商前缀和处理两个以上的层时,这会非常荒谬.

.building-texture-shade-dark {
  background: url(image/shade-dark.png), url(image/building-side.png);
}

.building-texture-shade-mid {
  background: url(image/shade-mid.png), url(image/building-side.png);
}

.building-texture-shade-light {
  background: url(image/shade-light.png), url(image/building-side.png);
}

单独的元素

然而,老派的方式来处理这个问题.在本地运行一些测试时,我发现多层背景比使用子元素执行得更快.实际上对于大多数现代浏览器来说,即使引入一个简单的子项(没有应用背景)也会使渲染速度降低很多.

<div class="building-texture">
  <div class="shade-dark"></div>
</div>

JavaScript生成

为了克服手工输入第一个选项(组合类)的痛苦,可以使用JavaScript生成样式表.但你仍然有长阶级名字的尴尬.另外,当您想要更改组合类的一个应用效果(例如删除着色)时,您必须编写一个能够根据命名约定来确定如何执行此操作的功能.

通过JavaScript样式属性

另一种选择是通过.style每个元素动态重写整个背景.我没有对此进行测试,但是我的脑袋告诉我这将是相当低效的,因为我确信浏览器在处理预设类时能够进行相当多的优化(即通过分类对元素进行分组).虽然我可能是非常错误的.

为什么...

我正在玩CSS 3D变换(启用透视)以及如何以简单快速的方式(示例代码)最好地纹理/照亮这样的结构:

http://pebbl.co.uk/wote/

示例图片http://pebbl.co.uk/wote/images/example.png

在很难生成css解决方案之后,我很高兴,我正在开发一个基于Canvas的解决方案,它可以预先构建我想要的所有纹理 - 以及它们不同的阴影状态 - 然后生成一个缓存数据URI作为单层背景附加.我的测试表明这是非常理想的.但是,我真的想使用尽可能多的基于浏览器的本地解决方案.因为有了一个,因为有了更多的代码涉及到更多的代码,而对于两个,因为今天的浏览器正在快速改进,重新发明任何车轮,引擎或道路网络似乎是愚蠢的.

即使可能认为我正在做的不是对css的"正确"使用,在我看来,每个背景项都是它自己的单元 - 对我来说,有意义的是应该有一些指定的方法来修改每个单独单位..即使它将来也是如此.

我会对任何答案感兴趣,并提供与这些讨论相关的链接.

Answer 1

用伪元素抽象它

我还不知道有什么方法可以“交换”单个背景。一种解决方法是基于“单独元素”技术，但内部元素是伪元素。我不知道渲染速度。它还有一个缺点，即它不适用于 IE8，因为您无法应用于filter伪元素。然而，由于您将这个想法与 CSS3 透视图等结合使用，因此 IE8 警告对您来说不是问题。

这实现了从阴影中抽象出纹理。它甚至可以通过伪元素添加另一个层:after，并且如果需要/需要，它仍然可以在三个层中的每一个中使用多个背景。

这是小提琴。

示例代码：

超文本标记语言

<div class="texture"></div>
<div class="texture light"></div>
<div class="texture medium"></div>
<div class="texture dark"></div>

CSS（核心）

.texture {
    position: relative;
    background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}

.light:before,
.medium:before,
.dark:before {
    content: '';
    position: absolute;
    top:0;
    right: 0;
    bottom:0;
    left: 0;
}
.light:before {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0.1)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.1) 100%);
}
.medium:before {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.6)), color-stop(100%,rgba(0,0,0,0.2)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%);
}
.dark:before {
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.3)));
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
    background: -o-linear-gradient(left,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
    background: -ms-linear-gradient(left,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 100%);
}