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

背景颜色

background-color: red;

背景图片

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

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

背景图片平铺

background-repeat: <repeat-style>[, <repeat-style>...]

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

背景图片随着窗口滚动

bacoground-attachment: <attachment>[, <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:设置图片显示的大小<length|percentage|auto> {1， 2} | contain | cover

---

渐变的背景设置

1. linear-gradient，线性渐变

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

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

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

---

background属性：

[ <bg-layer> , ]* <final-bg-layer>
where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>