背景图片

背景图片

注意点:同一个标签可以设置背景颜色和背景图片，背景图片会覆盖背景颜色

缩写：background：背景颜色 背景图片 平铺方式 关联方式 定位方式

• 如何设置背景图片
  
  background-img:url(‘图片路径’);
• 背景图片的平铺
  
  background-repeat:no-repeat;    (no-repeart:水平、垂直方向都不平铺。 repeat-x:在水平方向平铺。 repeat-y:在垂直方向平铺 )
• 背景定位
  
  background-position:水平方向 垂直方向； (水平方向、垂直方向：可以是具体的方位“left bottom”，也可以是具体的像素“10px 20px”)
  
  例如:  background-position:left top;   background-position:12px 20px;
• 背景关联
  
  什么是背景的关联方式： 默认情况下背景图片会随着滚动条的滚动而滚动， 我们可以修改背景图片的和滚动条的关联方式，从而不滚动。
  
  barkground-attachment:fixed;   默认取值:scroll
• 背景图片设置大小
  
  background-size:水平方向 垂直方向;
  
  默认，具体像素，百分比，宽度等比拉伸（auto），高度等比拉伸（auto）
  
  background-size:cover （cover:告诉图片需要等比拉伸，图片要拉伸到高度和宽度填满元素）
  
  background-size:contain （contain:告诉图片需要等比拉伸，图片要拉伸到高度或宽度填满元素）

插入图片和背景图片的区别

1. 背景图片不会占用位置，插入图片会占用位置
2. 背景图片有定位属性，所以可以方便控制图片的位置
3. 插入图片的语义比背景图片的语义强，所以在企业中开发如果你的图片向北搜索引擎收录，那么推荐使用插入图片

精灵图

• 什么是css精灵图
  
  css精灵图是一种图像合成技术
• css精灵图的作用
  
  可以减少请求次数，以及可以降低服务器的处理压力