背景和渐变

发表于 更新于 分类于

背景基础知识

  1. 背景颜色基础知识
    • background-color: ;
    • 背景颜色可以用十六进制，rgba,rgb,表示
    • padding 是有背景颜色的
  2. 背景图片基础知识
    • 用来设置背景图片。 background-image: url();
    • 可以是相对路径，绝对路径，网络图片

背景图片高级属性

  1. 背景图片的重复模式
    • background-repeat 属性可以用来设置背景的重复模式
    • repeat x,y均平铺（默认）
    • repeat-x x轴平铺
    • repeat-y y轴平铺
    • no-repeat 不平铺
  2. 背景尺寸
    • background-size: 100px 100px; 宽，高
    • 设置背景图片尺寸，兼容到IE9
    • 值也可以用百分比来表示，表示盒子宽高分别百分之多少。
    • 需要等比例设置的值，可以设置auto
    • contain和cover
      • background-size: contain; 表示将背景图片只能改变尺寸以容纳到盒子里
      • cover表示将背景图片智能改变尺寸以撑满盒子
  3. 背景裁切
    • background-clip 属性用来设置元素的背景裁切到哪个盒子。兼容到IE9
      1
      2
      3
      4
      5
      6
      7
      8
      9
      .box5{
              margin: 50px 0;
              width: 300px;
              height: 300px;
              border: 10px dotted #000;
              background-image: url('./images/niaochao.jpg');
              padding: 24px;
              background-clip: border-box;
      }
    • border-box 背景延伸至边框（默认值）
    • padding-box 背景延伸至内边（padding)，不会绘制边框处（仅在dotted、dashed边框可察觉）
    • content-box 背景被裁剪至内容区
  4. 背景固定
    • background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动
      1
      2
      3
      4
      5
      6
      7
      .box4{
             width: 200px;
             height: 200px;
             background-attachment: fixed;
             background-image: url('./images/gugong.jpg');
             overflow-y: scroll;
       }
      • fixed 自己滚动条不动，外部滚动条不动
      • local 自己滚动条动，外部滚动条动
      • scroll 自己滚动条不动，外部滚动条动（默认值）
    • 用途：视差滚动特效
  5. 背景图片位置
    • background-position: 100px 200px;
    • 设置背景图片在盒子的位置
    • 可以用位置描述符 top left right bottom
  6. background综合属性
    • background: white url("images/goblin.png") no-repeat center center;
    • 背景颜色，背景图片，背景重复，背景位置

渐变背景

  1. 线性渐变
    • background-image: linear-gradient(to right, blue, red);
    • 渐变方向，开始颜色，结束颜色
    • 渐变方向可以写成度数，比如45deg
    • 可以有多个颜色值，并且可以用百分数定义它们出现的位置 linear-gradient(to bottom,blue,yellow 20%,red)
    • 浏览器私有前缀
      • Chrome -webkit-
      • Firefox -moz-
      • IE、Edge -ms-
      • 欧朋 -o-
  2. 径向渐变
    • 盒子可以使用 background-image: radial-gradient(50% 50%,red,blue); 创建径向渐变
    • 参数：圆心坐标，颜色，颜色，颜色

CSS精灵（雪碧图，前端优化方案之一）

  1. CSS精灵：将多个小图标合并制作到一张图片上，使用background-position属性单独展示其中一个，这样的技术叫做CSS精灵技术，也叫做CSS雪碧图
  2. 减少HTTP请求数，加快网页速度，缺点：不方便测量，后期修改不方便