Niquelao » 博客档案 » CSS 3 的多张图片

» 博客档案 » CSS 3 的多张图片 Niquelao CSS 3 的多张图片 2009 年 11 月 25 日，作者：Rumoroso CSS 3 引入的一项新功能（我个人非常欢迎）是可以在同一个元素中包含多张背景图片 (http://www.w3.org/TR/css3-background/#layering)。直到目前，如果我们想将多张图片组合成背景，唯一能做的是利用页面上的某些元素，分别为其应用背景以获得所需结果。有时我们甚至会使用额外的标记，由于添加了仅用于演示目的的标记，降低了网页质量。但现在情况改变了……感谢 CSS 3，如果我们想使用两张或更多背景图片，可以在 background-image 属性中添加每张图片的路径，并用逗号分隔。例如：background-image: url(‘fondo1.png’), url(‘fondo2.png’) 可以通过以下方式声明需要使用的元素。克拉罗，一位新的外科医生… ¿ se superponen entre ellas？ ¿ se pueden posicionar en distintos lugares？ ¿ se puede repetir una sobre un eje y evitar que la otra lo haga？ … …您仍然可以回复 SI 。尊重超级位置、声明的初始图像和通常使用的情况。继续与 detrás de esta、se coloca la siguiente（en un eje Vertical a la pantalla）、luego la siguiente、y así sucesivamente hasta la última、que será la que se situe detrás de todas。 Es como si cada imagen se situase en una capa 。如果声明了字体颜色，则所有图像都将被删除。至于其余疑问，我可以给出一个概括性的回答，因为这些疑问都是基于我们习惯使用的属性，即背景图片位置 (background-position)、滚动行为 (background-attachment) 和重复 (background-repeat)。如果我们想让每张图片拥有特定的值，只需依次声明并用逗号分隔即可（就像声明图片本身那样）。例如：background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; 这样我们就声明了三张背景图片，第一张位于左上角，第二张向右偏移 150px 向下偏移 200px，第三张同样位于左侧且垂直居中。关于重复，第一张和最后一张不重复，第二张在水平轴上重复。但是，请不要忘记该主题。 Para los que nos gusta optimizar el código (que deberíamos ser todos), algunas declaraciones se pueden abreviar: background-position: 0 0, 150px 200px, left center; 变为：background-position: 0 0, 150px 200px, left; 删除了 center 这个词。 众所周知（或者我们应该知道），当没有声明背景位置的其中一个值时，默认值是居中 (center)，在本例中是垂直居中。background-repeat: no-repeat, repeat-x, no-repeat; 变为：background-repeat: no-repeat, repeat-x; 第三个值可以删除。原因是当缺少值时，会重复已声明的值列表，直到每张图片都有一个值（因此如果值列表重新开始，第一个值将是 no-repeat）。如果需要优化，可以使用简写形式的背景： : background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px Repeat-x, url(‘fondo3.png’) left no-repeat; Como veréis，正如你们所见，这一切为我们的设计开辟了广阔的可能性。

Algunos navegadores，在当前版本中，已经开始支持多重背景图片。其中包括 Firefox（3.6 版本的一部分）、Chrome、Safari 和 Konqueror。如果您使用了这种方法，则可以在准备工作中获得结果。遗憾的是，Internet Explorer（还不确定未来版本 9 是否会包含）和 Opera 目前还不支持。继续 os incluyo un pantallazo con lo que se muestra en el ejemplo cuando hay soporte（si accedéis con un navegador sin soporte, únicamente veréis el borde punteado）：Aparte de lo comentado，CSS 3 también incluye nuevos valores para algunas de las propiedades请注意，新的属性是 darán gran Versatilidad a nuestros diseños。 En un próximo artículo las trataré en detalle. Para ir abriendo boca os menciono background-size… ¡sí, es lo que estáis pensando!注意：除了文章的技术内容之外，最吸引人的是照片里的蛋糕。 为了让你们羡慕，我告诉你们这张照片是我拍的，是 Dolores 为我准备的水果蛋糕……显然，她也非常擅长控制呈现效果，而且我保证她精通内容管理，因为蛋糕非常好吃…… 多张喜欢的图片 CSS 3 类别： CSS —> 4 条评论 多张喜欢的图片 CSS 3 26 de Noviembre de 2009 […] ahora la cosa cambia… 多张喜欢的图片 CSS 3 […] 提及 Niquelao 的推文 » Archivo del weblog » 多张喜欢的图片 CSS3 — Topsy.com 2009 年 11 月 27 日 […] Jorge Rumoroso、Juanjo Fernández 在 Twitter 上提到了这篇文章。 Juanjo Fernández 说： RT @rumoroso：#niquelao 与 CSS 3 相关的多个图片 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » Archivo del weblog » CSS 3: Propiedades de foldo 2 de Diciembre de 2009 […] soporte en las versiones más reales de los navegadores (como ya)包含 CSS 3 中的多张图片），包括实验性的实验性图片（例如 Firefox 中的预览 […] Niquelao » Archivo del weblog » Más sobre CSS 3: background-origin y background-clip 13 de Diciembre de 2009 […] ya expliqué en其他文章，包含 CSS 3 podremos 的背景来源和背景剪辑，其中包含了 RSS 2.0 的评论。前面的文章： Otro toque de estilo en el Curso de CSS Artículo siguiente: CSS 3: Propiedades de foldo —> —> —> Esta obra está bajo una licencia de Creative Commons 。