我一直在寻找,但找不到任何提及的当前,甚至提出未来的规格.我的想法说,可能不会,但网络是如此巨大,现在我确信有人在某个地方有信息或链接到这些线的讨论.
伪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变换(透视启用),以及如何以简单快速的方式对这些结构进行纹理/点亮(示例代码)：
example image http://pebbl.co.uk/wote/images/example.png
在生成一个css解决方案后,我很高兴,我目前正在寻求一个基于Canvas的解决方案,该解决方案可以预先构建所有可能需要的纹理以及不同的阴影状态,然后生成缓存要作为单层背景附加的数据URI.我的测试表明这是相当理想的.不过,我真的很想使用尽可能多的基于浏览器的解决方案.对于一个,因为与画布有更多的代码涉及,而两个因为今天的浏览器正在如此快速地改进,重新发明任何轮子,引擎或道路网络似乎是愚蠢的.
即使可能认为我正在做的不是“适当”使用CSS,在我看来,每个背景项目都是自己的单位 – 对我来说,应该有一些指定的方式修改每个单位分开..即使它在将来的路上.
我会感兴趣的任何答案与链接到这些方面的讨论.
解决方法
我不知道有什么办法“互换”一个单一的背景.一个解决方法是基于“单独元素”技术,但内部元素是伪元素.我不知道渲染速度.它也有一个缺点,它不适用于IE8,如you cannot apply filter to pseudo-elements.但是,由于您将这个想法与CSS3的角度一起使用,所以IE8的警告并不是您的一个问题.
这实现了纹理从阴影的抽象.甚至可以通过以下方式添加另一层：伪元素,如果需要/需要,它仍然可以在三个中的每一个中使用多个背景.
示例代码：
HTML
<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.3) 0%,0.1) 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,0.3)),color-stop(100%,0.1)));
background: -webkit-linear-gradient(left,0.1) 100%);
background: -o-linear-gradient(left,0.1) 100%);
background: -ms-linear-gradient(left,0.1) 100%);
background: linear-gradient(to right,0.1) 100%);
}
.medium:before {
background: -moz-linear-gradient(left,0.6) 0%,0.2) 100%);
background: -webkit-gradient(linear,0.6)),0.2)));
background: -webkit-linear-gradient(left,0.2) 100%);
background: -o-linear-gradient(left,0.2) 100%);
background: -ms-linear-gradient(left,0.2) 100%);
background: linear-gradient(to right,0.2) 100%);
}
.dark:before {
background: -moz-linear-gradient(left,0.8) 0%,0.3) 100%);
background: -webkit-gradient(linear,0.8)),0.3)));
background: -webkit-linear-gradient(left,0.3) 100%);
background: -o-linear-gradient(left,0.3) 100%);
background: -ms-linear-gradient(left,0.3) 100%);
background: linear-gradient(to right,0.3) 100%);
}
