css学习笔记：背景

background
设置元素的背景

• background-color
  设置背景颜色

  background-color:red;
  

• background-image
  设置背景图片

  background-image:url('./src/bg.jpeg');
  

背景颜色与背景图片可以同时设置

• background-repeat
  当图片不足以填充元素时，设置元素的填充方式
  可选值：
  • repeat
    默认值，按水平与垂直方向重复铺满
  • repeat-x
    按水平方向铺满
  • repeat-y
    按垂直方向重复铺满
  • no-repeat
    图片不重复，空白区域什么都不做
• background-position
  设置从背景图片的什么位置开始填充,按水平与垂直方向设置
  可选值：
  top、left、right、bottom

  background-position: left top;
  

  也可以通过像素来设置

  background-position: 100px 100px;
  

  一般用于一张图片上有多个小图标时，通过坐标定位图标位置进行设置背景。
• background-size
  设置背景图片的大小
• background-origin
  设置背景的偏移量，从盒子的什么位置开始绘制
  可选值：
  • border-box
    从边框位置开始填充
  • padding-box （默认）
    从内边距开始填充
  • content-box
    从内容区开始填充
• background-clip
  背景的显示区域
  可选值：
  • border-box （默认）
    背景只会从边框位置开始显示，但是会被边框覆盖
  • padding-box
    从内边距区域开始显示
  • content-box
    从内容区区域开始显示
• background-attachment
  背景是否会随着鼠标滚动
  可选值：
  • fixed
    固定位置
  • scroll
    背景会随着鼠标滚动而消
• background
  背景简写属性
• 由于图片是外部资源，浏览器需要时才开始加载。
  如果想一次性加载，可以将多张图片放在一张图片上，通过background-position定位图片的绘制位置。
  只适用于小图片，图片过大，加载很慢，影响用户体验
• 背景渐变

  background-image: linear-gradient(to top, #F00, #00F);    
  

  • linear-gradient 线性渐变
    参数1：
    渐变方向，可选值：
    to left, to right, to top, to bottom, deg(角度)
    后面的参数为可选值，参与渐变的颜色。可以在颜色后面设置比例，值为百分比或像素
  • repeating-linear-gradient
    当使用像素设置分布时，未铺满时重复上面的颜色分布。