07 css背景

背景

背景颜色

一般情况下元素背景颜色默认值是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;