背景

  • background-image设置背景图片
    • 可以同时设置背景颜色和背景
    • 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
    • 如果背景的图片大于元素，则部分背景无法正常显示
    • url(‘’)加入图片路径
  • background-color设置背景颜色
  • background-repeat用来设置背景的重复方式
    • 可选值
      • repeat：背景会沿着x轴y轴双方向重复
      • repeat-x/repeat-y:沿着单方向
      • no-repeat：不重复
  • background-position设置背景图片的位置
    • 通过top left right bottom center等方位词
      • 必须指定两个值，如果只写一个，第二个默认center
    • 通过偏移量来指定背景图片的位置
      • 水平方向的偏移量 垂直方向的偏移量
  • background-clip设置背景的范围
    • 可选值
      • border-box默认值，背景会出现在边框的下边
      • padding-box背景不会出现在边框，只会出现在内容区和内边距
      • content-box背景只会出现在内容区
  • background-origin背景图片的偏移量计算的原点
    • 可选值同上。
  • background-size背景图片的大小
  • background-attchment背景图片是否跟随元素移动

  • background简写属性，没有顺序要求。但size必须在position后面，还有用/隔开。origin必须在clip的前面

    闪烁问题

  • 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载

  • 浏览器加载外部资源时是按需加载的

  • 像我们的练习link会首先加载，而hover和active会在指定状态触发时才会加载。

    解决闪烁问题-雪碧图


  • 为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了，

  • 然后在通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
  • 优点：
    • 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，
    • 提高访问效率，提高了用户体验。
    • 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
  • 雪碧图使用步骤：
    • 先确定要使用的图标
    • 调整图标的大小
    • 根据测量结果创建一个元素
    • 将雪碧图设置为元素的背景图片
    • 设置一个偏移量以显示正确的图片

渐变

  • 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
  • 通过background-image来设置
    • 线性渐变 linear-gradient \ repeating-linear-gradient(重复平铺的线性渐变）
      • 开头可以指定一个渐变的方向
        • to left\to right\to bottom\to top
        • deg deg表示度数
        • turn 表示圈
      • 渐变可以指定多个颜色，多个颜色默认平均分布，也可以手动指定分布情况
    • 径向渐变 radial-gradient (放射性的效果)
      • 默认情况下径向渐变的形状根据元素的形状来计算
      • 开头可以手动指定径向渐变的大小 （出来圆形或者椭圆形）
      • 。。。不打了。没用。学会看文档