HTML与CSS之背景

2023年7月20日 160次阅读 来源: JustinPenChia

背景(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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞