Day2课程 4-background 的两种写法

Day2课程 4-background 的两种写法

背景图片background - 拆分写法、复合写法

复合写法

属性名：background
属性值：背景色 背景图 平铺方式 位置/缩放 固定（空格隔开各个属性，不区分顺序）

拆分写法的各个属性及属性值

背景图的相关属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

（其中背景色已经在前面学过，这里从背景图开始）

背景图

装饰的作用，Emmet写法是bgi，属性值是url
由于背景图都是在盒子范围里面显示的，所以工作中会先把盒子限定一个宽高范围，再添加这个背景图（注意这里是css样式内容里的图片应用，请与html中的插入图片区分）
例如：

div {
	width: 400px;
	height: 400px;
	
	background-image: url(./images/1.png);
}

背景图默认是平铺（复制）的效果

平铺方式 - repeat

属性值（对应效果）：
○ no-repeat （不平铺）；repeat（默认平铺的效果）；
○ repeat-x（水平方向平铺）；repeat-y（垂直方向平铺）

位置 - position

属性值：水平方向位置 垂直方向位置

○ 关键字：left、right、center、top、bottom（其中水平和垂直的居中都是center）
○ 坐标（数字 + px，正负都可以）
○ 关键字和数字只用一种或者混用都是可以的

提示：
○ 关键字取值方式写法，可以颠倒取值顺序
○ 可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

缩放 - size

常用属性值：
○ 关键字：
   ● cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
   ● contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
○ 百分比
   此时缩放的是图片的水平方向的长度（即宽度）
○ 数字 + 单位（如px）

（从以上的内容来看，水平与垂直的方向，水平的优先级大于垂直）

固定 - attachment（了解）

作用：背景不会随着元素的内容滚动
属性值：fixed
常用在网页的大图里，一般不常用，了解即可