盒子背景属性

目录

1 background-color 背景颜色

2 backgroun-imge  背景图片

3 backgroun-repeat 重复

4 background-position 背景图片位置

5  background-attachment  背景关联

---

1 background-color 背景颜色

• background-color 表示背景颜色
• 背景颜色可以用 十六进制、rgb()、rgba() 或 英文单词表示
• padding 区域是有背景颜色的

2 backgroun-imge  背景图片

• background-image属性用来设置背景图片
• 图片路径要写在 url()圆括号中，可以是相对路径，也可以是绝对路径
• 地址相对路径是从 css 样式的位置出发

3 backgroun-repeat 重复

用来设置背景图片的重复模式，在默认情况下，背景是会在 x 和 y 轴方向进行平铺。

4 background-position 背景图片位置

• 用来控制背景图片在盒子中显示的开始位置
• 背景图片位置默认是从 padding 区开始计算

background-position: 水平方向 垂直方向;

取值 ​

具体的方位名词 ​ 水平方向: left center right ​ 垂直方向: top center bottom

具体的像素 ​ 例如: background-position: 100px 200px; ​ 记住一定要写单位, 也就是一定要写px ​ 记住具体的像素是可以接收负数的

注意点: ​ 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

5  background-attachment  背景关联

scroll 默认值， 会随着滚动条的滚动而滚动

​ fixed 不会随着滚动条的滚动而滚动

 

6 background-size 背景尺寸