2023-01-03 day7 背景相关

1. background-image

会盖在(不是覆盖)background-color的上面

如果设置了多张图片

设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

背景坐标系

2. background-repeat

• repeat：平铺
• no-repeat：不平铺
• repeat-x：只在水平方向平铺
• repeat-y：只在垂直平方向平铺

3. background-size

• auto：默认值, 以背景图本身大小显示
• cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
• contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
• ：百分比，相对于背景区
• length：具体的大小，比如100px

4. background-position

• 可以设置具体的数值 比如 20px 30px;
• 水平方向还可以设值：left、center、right
• 垂直方向还可以设值：top、center、bottom

• 如果只设置了1个方向，另一个方向默认是center

  
  

5. background-attachment

• scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
• local：此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动
• fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

6. background-image和img对比

利用background-image和img都能够实现显示图片的需求，在开发中该如何选择？

Sprite(精灵图)

总结

• img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
• background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息