Niquelao » 博客档案 » 更多 CSS 3：背景来源和背景

» Archivo del weblog » Más sobre CSS 3：background-origin y background-clip Niquelao Más sobre CSS 3：background-origin y background-clip 2009 年 12 月 13 日，由 Rumoroso 继续回顾控制背景的各种 CSS 3 属性，现在轮到 background-origin 和 background-clip 了。这两个属性旨在帮助我们控制背景图像的定位原点，以及是否允许图像显示在边框下方。background-origin：确定计算背景位置的起点，即 background-position 属性的坐标原点。 其可选值包括：border-box：背景位置相对于包含边框的区域确定（这意味着如果边框是虚线，背景可能会在边框下方显示）。padding-box：默认值，背景位置相对于包含内边距（padding）的区域确定（等同于 CSS 2.1 中的当前行为）。content-box：背景相对于内容区域定位。 background-clip：确定背景显示的区域，支持两个可选值：border-box：默认值，背景包含在边框所占的区域内。padding-box：将背景显示区域限制在内边距和内容所占的区域，也就是说，即使背景原点在边框上，图像也不会在边框下方显示。像往常一样，最好的解释方式是参考截图示例。在示例中，我模拟了一个元素所占的空间（遵循盒模型），即：边框（灰色粗点线）、内边距（边框与细虚线之间的空间）和内容（由虚线界定）。 Empecemos：图像之间有何区别？很明显，两者的区别在于其中一张图的背景显示在边框下方，而另一张则没有。 第一张的 CSS 为：background-origin: border-box; background-clip: border-box; …而第二张为：background-origin: border-box; background-clip: padding-box;那么，接下来的两张图之间有什么区别？现在的区别在于背景的原点。在第一张中，原点包含边框：background-origin: border-box; …而第二张原点在内边距：background-origin: padding-box;最后，现在的区别是什么？：再次很明显。第一张图与之前示例的第一张一样，背景原点是边框区域，而第二张的原点在内容区域：background-origin: border-box; 和 background-origin: content-box;如果您的浏览器是 Firefox、Chrome、Safari 或 Konqueror 的最新版本，可以访问该示例页面。如果您使用其他浏览器（例如 Internet Explorer 或 Opera），也可以访问，但此时是为了查看不支持这些属性时的结果。注意：Mozilla 和 WebKit 都具有实验性的特性。正如我在另一篇文章中解释的，CSS 3 允许我们包含多张背景图像。background-origin 和 background-clip 属性允许为每张使用的图像分别设置一个值。最后，我们将就有关示例中的图像进行评论。

Es una deliciosa tarta de frutas que hizo Dolores y que me gané por bueno… vale, que me gané a secas… bueno, no me la gané, pero la disfruté como un niño Más sobre CSS 3: background-origin y background-clip 类别: CSS —> 1 条评论 Tweets 提及 Niquelao »博客档案 » 更多 CSS 3：背景起源和背景剪辑 — Topsy.com 2009 年 12 月 14 日 […] Jorge Rumoroso、Juanjo Fernández 在 Twitter 上提到了这篇文章。 Juanjo Fernández 说： RT @rumoroso：#niquelao Más sobre CSS 3：background-origin y background-clip http://bit.ly/5wKoQt #CSS3 […] 您可以通过 RSS 2.0 订阅来跟踪评论。您也可以从您的网站发送 trackback。前面的文章：仅使用 CSS 变换和过渡的鱼眼菜单 —> —> —> 本作品采用知识共享（Creative Commons）许可协议。