背景颜色及背景图片相关的属性

1.background-color
  设置背景颜色,取颜色值
  注意:
    1.所有元素默认的背景颜色都是透明色,新建窗口的白色不是body的背景色,是浏览器渲染的
    2. 背景颜色从边框位置开始绘制
    3. 如果元素添加内边距,也会按照背景颜色进行填充

2.背景图片
  1.设置背景图片
    属性:background-image
    取值:url()
    注意:1.背景图片的尺寸如果大于元素尺寸,图片仍然按照原始尺寸显示,超出元素的部分不可见
       2.背景图片的尺寸小于元素尺寸,浏览器会自动对背景图片重复平铺,直到铺满元素
       3.背景图片与背景颜色一样,不影响元素正常显示
  2.设置背景图片的重复方式
    图片尺寸不够时,浏览器会自动沿水平和垂直两个方向对图片进行重复平铺,直到铺满元素
    属性:background-repeat
    取值:1.repeat:默认值,沿水平和垂直方向平铺
       2.repeat-x:沿水平方向平铺
       3.repeat-y:沿垂直方向平铺
       4.no-repeat:设置背景图片不重复平铺
  3.设置背景图片的位置
    1.属性:background-position
    2.取值:x y
      1.取像素值:
        x:表示背景图片水平方向的偏移距离
         正值表示图片向右偏移,负值表示图片向左偏移
        y:背景图片垂直方向的偏移距离
         正值表示图片向下偏移,负值表示图片向上偏移
        注意:结合“精灵图”实现元素背景图片调整,这种技术叫“精灵技术”
      2.取百分比
        参照元素尺寸计算水平和垂直偏移距离
        1. 0% 0%:背景图片显示在元素左上角
        2. 50% 50%:背景图片显示在元素中间
        3. 100% 100%:背景图片显示在元素右下角
      3.方位值确定背景图片的位置
        x:left / center / right
        y: top / center / bottom
        如果只设置一个方向上的关键字,另外一个方向默认是center
  4.设置背景图片的大小
    1.属性:background-size
    2.取值:x y
      x y分别表示背景图片的宽和高
      1.像素值
      2.百分比:参照元素宽高尺寸计算背景图片大小
      3.cover:表示将图片等比放大至完全覆盖元素,超出部分不可见
      4.contain:表示将图片等比拉伸至刚好被元素容纳,不能超出元素尺寸,可能或造成背景图片无法完全覆盖元素的效果
  5.背景属性简写
    1.属性:background
    2.取值:color url() repeat position
    注意:1.背景属性按照上面取值的顺序设置
       2.background-size单独设置

原文地址:https://www.cnblogs.com/zengsf/p/9794104.html