背景
背景颜色
一般情况下元素背景颜色默认值是transparent(透明的)
background-color: red;
背景图片
实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片
background-image: url();- 优点是非常便于控制位置(精灵图也是一种运用场景)
- 背景平铺
如果需要在HTML页面上对背景图像进行平铺, 可以是使用background-repeat属性 background-repeat: repeat|no-repeat|repeat-x|repeat-y
背景图片位置
background-position (重要!)
background-position: x, y;
参数代表的意思是: x坐标和y坐标, 可以使用方位名词或者精确单位
方位名词:
- 如果两个值是方位名词, 和顺序无关
background-position: center top;水平居中 - 如果只制定了一个方位名词,另一个值省略, 则第二个值默认居中对齐
精确单位
- 如果参数是精确坐标, 那么第一个肯定是x坐标, 第二个是y坐标
- 如果只指定一个数值,则该数值一定是x坐标,另一个默认垂直居中
混合单位
- 第一个值一定是x, 第二个一定是y
| 参数值 | 说明 |
|---|---|
| length | 百分数/由浮点数和单位标识符组成的长度值 |
| position | top/center/botton/left/center/right 方位名词 |
背景图像固定等
background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动
- background-attachment后期可以制作视差滚动的效果
- `background-attachment: scroll/fixed
背景复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
- 没有顺序要求
背景色半透明
background-color: rgba(0, 0, 0, 0.3);
- 只会影响背景颜色, 不会影响背景里面的内容!!
背景图片: 实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)
background-size 图片大小
overflow: hidden;