【前端】-016-页面制作-CSS-背景

背景颜色

background-color: red;

背景图片

background-image: url(...), url(...)

• 先写的图片在上一层，后引入的图片在下一层；
• background-color始终在最底层。

背景图片平铺

background-repeat: [, ...]

• repeat-style 表示平铺样式，repeat-x| repeat-y| [ repeat | space| round| no-repeat]{1, 2}
• space：空隙，正好完整展示
• round：缩放，正好完整放下

背景图片随着窗口滚动

bacoground-attachment: [, ]

• attachment 表示滚动方式，scroll | fixed | local
• 默认scroll，local内容和背景一起动

背景图片的位置

1. bacoground-position:，设置图片位置
2. background-origin，设置图片起始坐标的位置

• padding-box|border-box|content-box;

• 默认位置为padding-box；

  
  
  

  盒模型的初始位置.png

3. background-clip，裁剪图片区域，参数同origin
4. background-size:设置图片显示的大小 {1， 2} | contain | cover

---

渐变的背景设置

1. linear-gradient，线性渐变

• [ | ]?, 其中， = left | right | top | bottom
• color-stop
• 0deg表示从下往上，45度表示在零度的基础上，顺时针旋转45度，进行渐变

2. radial-gradient，径向渐变
3. 线性渐变和径向渐变平铺

• 在linear或radial前增加关键字，repeat即可

---

background属性：

[ , ]*
where
= || [ / ]? || || || {1,2}
= || [ / ]? || || || || || <'background-color'>