day13-CSS-背景和精灵图

背景颜色

• 如何给标签设置颜色
  • CSS中的background-color属性就是设置标签的背景颜色
• 如何取值？
  • 具体的单词：red black等
  • rgb：rgb(0,244,233)
  • 十六进制：#000ffff
  • rgba(0,233,233,1)

背景图片

• 如何设置背景图片？
  • CSS中的background-image：url()属性就是设置标签的背景颜色
• 如何取值？
  • url（）括号中是图片地址：网络地址或本地地址
• 注意：
  • 1️⃣图片的大小如果比标签尺寸小，会自动水平和垂直填充
  • 2️⃣如果网页上出现图片，浏览器会发生网络请求去获取图片----可以在开发者工具中的Network栏查看

背景平铺属性

• background-repeat：取值如下
  • 默认情况下是repeat -- 垂直水平都平铺
  • no repeat -- 不平铺
  • repeat-x：水平方向平铺
  • repeat-y：垂直方向平铺
• 应用场景
  • 若图片很大，不利于用户体验，下载的时候会很慢，所以可以利用一个小图片且有规律的图片可以进行平铺，可以加速浏览器访问速度

背景定位

• 一个标签可以同时设置背景图片和背景颜色，图片会覆盖在背景颜色上面，左上角
• 如何控制背景图片的位置？
  • CSS中有background-position：水平方向 垂直方向 -- 用来控制背景图片位置
• 取值（可自行搭配）
  • left top--左上角
  • right top--右上角
  • left bottom--左下角
  • right bottom--右下角
  • center center--正中间
  • 也可以写数值，但是一定要加上单位px；也可以是负值
• 应用场景
  • 一般会用一张很大的图片，由于不同设备分辨率会不同
  • 可以利用position一直设置center top，则一直可以显示图片最中间部分，两边信息不重要

背景属性缩写格式

• background：背景颜色 背景图片 平铺方式 关联方式 定位方式
  • background:red url() no-repeat left bottom;
• 注意点
  • 1️⃣background中任何一个属性都可以省略；例如不设置颜色
• 关联方式：背景图片是否跟随滚动
  • background-attachment
  • fixed：不会随着滚动条滚动
  • scroll：随着滚动条滚动 -- 默认
• 快捷键
  • bg+
  • div.类名$*个数 --- 生成类名编号递增的div

背景图片和插入图片

• 背景图片：
  • 1️⃣仅作为装饰，不会占用父控件的存储空间
  • 2️⃣有定位属性，可以控制图片位置
• 插入图片：
  • 1️⃣会占用父控件的存储空间
  • 2️⃣没有定位属性
  • 3️⃣img语义强于背景图片，若图片想被搜索引擎收录，推荐使用插入图片

精灵图

• 产生原因：由于浏览器请求数据过程，若网页图片过多会多次请求，会增大服务器压力；使用精灵图可以减少请求次数，降低服务器压力
• 精灵图是指的一个由多个小图片合成的图片，是一种图像合成技术
• 如何使用？可以使用图片定位找到所需的部分
• 推荐工具：fireworks
  • 1️⃣打开图片
  • 2️⃣右侧锁定图片---一定要做，以防图片错乱