CSS：现在还是提出设置多个背景的层次的方法？

有人意识到使用纯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/

example image http://pebbl.co.uk/wote/images/example.png

在生成一个css解决方案后,我很高兴,我目前正在寻求一个基于Canvas的解决方案,该解决方案可以预先构建所有可能需要的纹理以及不同的阴影状态,然后生成缓存要作为单层背景附加的数据URI.我的测试表明这是相当理想的.不过,我真的很想使用尽可能多的基于浏览器的解决方案.对于一个,因为与画布有更多的代码涉及,而两个因为今天的浏览器正在如此快速地改进,重新发明任何轮子,引擎或道路网络似乎是愚蠢的.

即使可能认为我正在做的不是“适当”使用CSS,在我看来,每个背景项目都是自己的单位 – 对我来说,应该有一些指定的方式修改每个单位分开..即使它在将来的路上.

我会感兴趣的任何答案与链接到这些方面的讨论.

解决方法

用伪元素抽象

我不知道有什么办法“互换”一个单一的背景.一个解决方法是基于“单独元素”技术,但内部元素是伪元素.我不知道渲染速度.它也有一个缺点,它不适用于IE8,如you cannot apply filter to pseudo-elements.但是,由于您将这个想法与CSS3的角度一起使用,所以IE8的警告并不是您的一个问题.

这实现了纹理从阴影的抽象.甚至可以通过以下方式添加另一层：伪元素,如果需要/需要,它仍然可以在三个中的每一个中使用多个背景.

Here is the fiddle.

示例代码：

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%);
}

原文地址：https://www.jb51.cc/css/216378.html

CSS：现在还是提出设置多个背景的层次的方法？

解决方法

相关推荐