详解 CSS 的背景属性

详解 CSS 的背景属性

背景颜色

语法： background-color: [指定颜色];

注：默认是 transparent (透明) 的，可以通过设置颜色的方式修改

示例代码:

运行效果:

背景图片

语法：background-image: url(...);

• url 可以是绝对路径 也可以是相对路径
• url 上可以加引号, 也可以不加.

比 image 标签更方便控制位置(图片在盒子中的位置)

示例代码

运行效果

背景平铺

语法：background-repeat: [平铺方式];

background-repeat的重要取值	效果
repeat(默认值)	平铺
no-repeat	不平铺
repeat-x	水平平铺
repeat-y	垂直平铺

注：背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方

示例代码:

运行效果:

背景位置

修改图片的位置

语法：background-position: x y;

参数有三种风格:

1. 方位名词：top, left, right, bottom。
2. 精确单位：坐标或者百分比(以左上角为原点)
3. 混合单位：同时包含方位名词和精确单位

注意：如果参数的两个值都是方位名词， 则前后顺序无关. (top left 和 left top 等效)；
如果只指定了一个方位名词， 则第二个默认居中(left 则意味着水平居中, top 意味着垂直居中)

示例代码:

运行效果:

背景尺寸

语法：background-size: length|percentage|cover|contain;

注意事项：

• 可以填具体的数值： 如 40px 60px，表示宽度为 40px，高度为 60px
• 可以填百分比：按照父元素的尺寸设置
• cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中。
• contain：使用时不会让背景图像完全覆盖背景区域，会给背景区域的左右留出一部分区域

示例代码:

运行效果: