html和css之背景样式详解

背景样式详解
  • opacity和display的区别

    1. opacity设置的是透明度,值的范围是0~1,0代表完全透明,1代表不透明

    2. display为none,浏览器就不会渲染这个元素。

      一个元素设置为display为none后想让他在显示出来使用,display:原来的显示类型;

  • 背景颜色的显示区域

    内容区+padding+border

  • 背景图片

    background-image: url(‘图片地址’) ;

    div{
        background-image: url('./images/pic.jpg');
    }
    

    背景图片的显示区域 内容区域+padding+border

    背景图片支持的格式:.jpg,.png,.gif,.webp

  • 浏览器的渲染层级

    第一层:内容层

    第二层:边框层

    第三层:背景图片

    第四层:背景颜色

  • 背景图片为什么会重复显示:

    浏览器发现图片比盒子小就会让图片平铺把盒子占满

  • 如何让背景图片不重复显示:

    使用background-repeat属性,它有三个值

    div{
        background-repeat:
        	no-repeat /*垂直方向和水平方向都会重复*/
            repeat-x /*水平方向平铺*/
            repeat-y /*垂直方向平铺*/
            repeat /*垂直方向和水平方向都会重复*/
            ;
    }
    

    background-repeat:

    ​ repeat -> 垂直方向和水平方向都会重复

    ​ repeat-x -> 水平方向平铺

    ​ repeat-y -> 垂直方向平铺

    ​ no-repeat -> 水平垂直方向都不平铺

  • 设置完背景图片不平铺之后发现图片不会出现在border内,为什么?

    背景图片在设置平铺的时候会先在内容区显示一张图片,然后再去平铺。

  • 如何把背景图片拉大?

    使用background-size的属性,它有两个值:

    ​ background-size:width背景图片的宽 height背景图片的高;

    ​ 宽高可以设置为像素值,也可以设置为百分比:

    div{
        width:500px;
        height:500px;
        background-size: 350px 350px;/*支持*/
        background-size:50% 50%;/*同样支持,但百分数的基数是width和height属性,也就是说现在图片的宽度是1*500=500px 高度是1*500=500px*/
        background-size:350px;/*只写一个值的时候宽缩放至350px,高等比例缩放*/
    }
    
    /*除此之外background还有两个比较特殊的值,cover,contain*/
    div{
        width:500px;
        height:500px;
        background-size: 
            cover/*图片一直缩放到铺满整个内容区域*/
            contain/*一条边缩放到铺满内容区域后另一条边停下来*/
            ;
    }
    
    • 默认情况下背景图片是贴着padding的左上角去排列的,怎么改变它的起始点?

      使用background-origin属性

      div{
          background-origin:
              padding-box/*背景图片相对于内边距来定位*/
              border-box/*背景图片相对于内边距来定位*/
              content-box/*背景图片相对于内容区域来定位*/
              ;
      }
      
    • 背景剪裁

      使用background-clip属性,会裁剪背景图片和背景颜色

      div{
          background-clip:
              content-box/*只显示内容区部分的图片和颜色*/
              border-box/*显示border+padding+内容区的背景图片和背景颜色*/
              padding-box/*显示padding+内容区的背景图片和背景颜色*/
              ;
      }
      
  • overflow属性:

    div{
        overflow:
            visible/*超出之后正常显示*/
            hidden/*超出隐藏*/
            scroll/*内容不管超不超出都显示出一个滚动条*/
            auto/*内容不超出的时候不显示滚动条,内容超出则显示滚动条*/
            ;
    }
    
  • 什如何让背景图片不跟随内容区域滚动

    使用backgroun-attachment属性

div{
    background-attachment:
        scroll/*默认,不随内容区域滚动,而是定在起始的位置*/
        local/*会随内容的滚动而滚动*/
        fixed/*非常诡异的一种情况*/
        ;
}
  • 背景图片复合样式写法:

    div{
        background: color image repeat attachment position/size;/*位置和大小之间要使用/分隔开*/
    }
    
上一篇:前端使用笔记


下一篇:CSS3笔记009 - 第09章 背景样式