一篇文章带你了解CSS3 背景知识( 二 ) CSS3中包含几个新的背景属性

要求如下:
填满整个页面的图像（没有空白）

缩放图像
图像居中页面
没有滚动条

下面的示例演示如何使用HTML元素（HTML元素始终是浏览器窗口的高度）。然后设置一个固定中心的背景上。然后用background-size属性调整它的大小：

项目html {background: url(img/fy_indexBg.jpg) no-repeat center fixed;background-size: cover;}整个页面背景图Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat.

文章插图
三、属性1. background-origin 属性CSS3 background-origin 属性指定在背景图像定位在哪里.
这个属性有三个不同的值：
border-box ：背景图像从边框的左上角开始。
padding-box ：（默认）背景图像从左上角的填充边缘。
content-box ：背景图像从左上角的内容
下面的例子说明了background-origin属性：

#example1 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;}#example2 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;background-origin: border-box;}#example3 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;background-origin: content-box;}

文章插图
完整代码：

编程字典#example1 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;}#example2 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;background-origin: border-box;}#example3 {border: 10px solid black;padding: 35px;background: url(img/fy_indexBg.jpg);background-repeat: no-repeat;background-origin: content-box;}没有 background-origin (padding-box 默认):

Lorem Ipsum DolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-origin: border-box:

Lorem Ipsum DolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

background-origin: content-box:

Lorem Ipsum DolorLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

2. background-clip 属性CSS3 background-clip 属性指定背景的绘制面积.
该属性有三个不同的值:
border-box - (默认) 背景是画的边框外边缘 padding-box-背景被显示到填充物的外缘。 content-box - 背景是画在内容框内
下面举例演示了background-clip属性:
#example1 {border: 10px dotted black;padding: 35px;background: yellow;background-clip: content-box;}

文章插图
四、总结本文主要介绍了CSS背景，通过CSS实现多背景显示，自定义某一些尺寸显示格式， background-origin等多个属性的应用，丰富的案例帮助大家更好的理解。
希望大家自己去尝试一下，实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：