css3技术

CSS背景_div+css教程(3)

字号+ 作者:H5之家 来源:H5之家 2015-09-20 11:28 我要评论( )

* background-origin: border-box; 以边框为原点开始计算 background-position. * background-origin: padding-box; 以内补白为原点开始计算 background-position * background-origin: content-box; 以内容盒子为

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始计算 background-position
* background-origin: content-box;
以内容盒子为原点开始计算 background-position
对于 background-clip 和 background-origin 不同的一个解释参看 CSS3.info
新属性: 背景尺寸(background-size)

background-size 用来调整背景图的大小。有好几个可能值:

* background-size: contain;
缩小图片来适应元素的尺寸(保持像素的长宽比)
* background-size: cover;
扩展图片来填满元素(保持像素的长宽比)
* background-size: 100px 100px;
调整图片到指定大小
* background-size: 50% 100%;
调整图片到指定大小。百分比是相对于包含元素的尺寸的。

可以看一下 CSS3规则 网站上的几个例子。
新属性:(background-break)

CSS3 中,元素可以被分成几个独立的盒子(例如 使内联元素 span 跨越多行)。background-break 属性用来控制背景怎样在这些不同的盒子中显示。

可能值为:

* Background-break: continuous;
默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子,依然是一个整体一样)
* Background-break: bounding-box;
把盒之间的距离计算在内
* Background-break: each-box;
为每个盒子单独重绘背景
背景色(background-color)的改进

background-color 在 css3 中有了稍许改进。除了设置背景颜色之外,如果元素底层的背景图不可用,还可以设置一个“回退色”。

通过在回退色之前增加一个斜杠(/)来实现,例如:

background-color: green / blue;

此例中,背景色应该是绿色(green)。然而,如果底层背景图不能使用的话,背景色就是蓝色而不是绿色。如果在斜杠前不指定颜色,默认为透明(transparent)。
背景平铺(background-repeat)的改进

CSS2中当图片平铺时,会被元素在末端截断。CSS3 引入了两个属性来修正这个问题:

* space: 应用同等数量的空白到图片之间,直到填满整个元素
* round: 缩小图片直到正好平铺满元素
关于 background-repeat: space; 的一个例子,可以在 CSS3 规则网站看到。
背景附着(background-attachment)的改进

background-attachment 属性增加了一个新值:local。这是用来配合可以滚动的元素的(设置为 overflow: scroll; 的元素)。当 background-attachment 设置为滚动(scroll)时,背景图不会随元素内容的滚动而滚动。

设置为 background-attachment :local; 时,背景图会随内容的滚动而滚动。
总结

总结一下,css 中关于背景有许多需要知道的知识。但是一旦把这些知识融会贯通了,这些技术和命名约定就变得非常有意义而且很快就会成为潜意识行为了。

如果刚接触 css,主要不断联系就可以较快地掌握背景的要点了。如果是老手,我希望你可以和我一样期待 css3 。
关于作者

Michael Martin 的文章大多涉及网页设计,WordPress 并为 Pro Blog Design 工作。可以查看更多关于博客设计的文章或者在 twitter 上关注他。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS背景图片background-image须注意路径问题!_div+css布局教程

    CSS背景图片background-image须注意路径问题!_div+css布局教程

    2015-09-20 12:20

  • CSS背景颜色设置方法_div+css教程

    CSS背景颜色设置方法_div+css教程

    2015-09-16 15:11

  • 多重CSS背景动画实现方法示例

    多重CSS背景动画实现方法示例

    2015-09-13 09:04

网友点评