微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">
微软雅黑, 黑体, Arial, Helvetica, sans-serif; font-size: 18px; background-color: rgb(255, 255, 255);">背景的常用属性,如表3-14所示。
表3-14 背景设置的常用属性
属性 | 描 述 |
HTML5+CSS3\2014%E6%9C%80%E6%96%B0W3CSchool%E6%96%87%E6%A1%A3.chm::/www.w3school.com.cn/cssref/pr_background.asp" style="text-decoration-line: none; color: rgb(102, 102, 102); outline: none;">background | 在一个声明中设置所有的背景属性。 |
HTML5+CSS3\2014%E6%9C%80%E6%96%B0W3CSchool%E6%96%87%E6%A1%A3.chm::/www.w3school.com.cn/cssref/pr_background-attachment.asp" style="text-decoration-line: none; color: rgb(102, 102, 102); outline: none;">background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 设置元素的背景图像。 |
background-position | 设置背景图像的开始位置。 |
background-repeat | 设置是否及如何重复背景图像。 |
background-clip | 规定背景的绘制区域。 |
background-origin | 规定背景图片的定位区域。 |
background-size | 规定背景图片的尺寸。 |
多背景图属性background-image(背景图片)用来设置元素的背景图片。
背景尺寸属性background-size用来指定背景图片的尺寸,可以控制背景图在水平和垂直两个方向的缩放,也可以控制图片拉伸覆盖背景区域的方式,背景图片能够自适用元素盒子的大小,实现与模块大小完全适应的背景图片,避免因区块尺寸不同而需要设计不同的背景图片。
背景原点属性background-origin,主要用来决定background-position属性的参考原点,即决定背景图片定位的起点。默认图片的background-position属性以元素左上角为坐标原点对背景图片进行背景定位,可以根据自己的需要来改变背景图片的起始位置。如表3-15所示,背景原点属性的常用的属性值。
表3-15 背景原点属性的常用属性值
属性值 | 描述 |
border-box | 默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片 |
padding-box | 决定起始位置从border的外边缘开始显示背景图片 |
content-box | 决定起始位置从content的外边缘(padding的内边缘)开始显示背景图片 |