HTML与CSS之背景

背景(background)

内容可以把容器的宽高撑起来,背景不会占用容器的宽高

• background-color      背景色

     red:             颜色的英文表示   #f00:            颜色的十六进制表示   rgb(255,0,0):    颜色的RGB表示方法  在CSS3中rgba(255,0,0,0.5) 第四个参数表示透明度 
     transparent      背景透明(默认值为透明)

  例:background-color: green;

• background-image      背景图片

     url(图片地址)
     none 默认值

例:background:url(点点.jpg);

ps:路径:      
绝对路径         从磁盘出发的路径
相对路径         相对于网页文件的路径
域名路径         使用网络域名的路径

• background-repeat     背景图片是否重复平铺

     background-repeat: no-repeat;  //背景图片不进行平铺
     background-repeat: repeat-x;   //背景图沿着x轴平铺
     background-repeat: repeat-y;   //背景图沿着Y轴平铺
     background-repeat: repeat;    //全部平铺(默认值)

• background-position   背景图片的位置

  两种形式的值
     传参数：背景图离左上角的距离      x：正 向容器右边走的距离
           负 向容器左边走的距离      y：正 向容器下边走的距离
           负 向容器的上边的距离
     传关键字      x:left    图片在容器的左边        center  图片在容器的中间        right   图片在容器的右边      y:top     图片在容器的上边        center  图片在容器的中间 
          bottom  图片在容器的下边
        如果只传一个值的话，另外一个默认是center
        如果两个值都不写的话，则默认为(0,0)点   ,即左上角

例:background-position:20px 30px;//图片向右移动20像素，向下移动30px

• background-attachment 背景图片是否滚动

     scroll   背景图随滚动条滚动(默认)
     fixed    背景图不会随着滚动条滚动

• 背景的复合式写法：

  background: green url(点点.jpg) no-repeat center top;//背景为绿色，加入图片，图片不重复平铺，图片的x方向上居中，图片的y方向上居上。

作者：JustinPenChia
链接：https://www.jianshu.com/p/cba8e6d1b565