css中的background

background-size

• cover: 不修改图片原始比例,背景图把当前元素完全覆盖,图片可能会被裁剪
• contain: 不修改图片原始比例, 图片尽可能包含在当前元素内, 不会被裁剪
• 数值或百分比: 在background-size中数值和百分比都不能为负数,其中百分比的值是相对于北京定位区域计算的.

   <div class="auto">
        <div class="imgOne"></div>
        <div class="imgTwo"></div>
        <div class="imgThree"></div>
        <div class="imgFore"></div>
    </div>
// 样式
    <style>
        .auto{
            display: flex;
        }
        .imgOne {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/R-C.png) no-repeat center;
            background-size: contain;
        }

        .imgTwo {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/R-C.png) no-repeat center;
            background-size: cover;
        }
        /* 设置背景图占元素的百分比, 按比例缩放 */
        .imgThree {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/R-C.png) no-repeat center;
            background-size: 100%;
        }
        .imgFore {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/R-C.png) no-repeat center;
            background-size: 100px 200px;
        }
    </style>

• 效果图

多背景图

• 可以使background定位多个背景图, 使用时用逗号分隔不同独立背景定位语法

 <div class="duoImg"></div>
 // css
  .duoImg {
            width: 200px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/R-C.png) no-repeat top , url(./img/OIP-C.jpg) no-repeat bottom;
            background-size: 80%;
        }

• 示例图

background-repeat

• space: 让背景尽可能的重复,而不去裁剪,其中第一张和最后一张固定在两边,然后通过拉伸空白区域让剩余的图片均由分布
• round: 图片会被拉伸, 保证不留间隙, 如果剩余空间大于图片的一半则添加, 并压缩当前图片给添加的图片留出位置

    <div class="space"></div>
    <div class="round"></div>
    // css
    .space {
        width: 800px;
        height: 100px;
        border: 1px solid rebeccapurple;
        background: url(./img/OIP-C.jpg)  center;
        background-size: 13%;
        background-repeat:  space;
    }
    .round {
        width: 800px;
        height: 100px;
        border: 1px solid rebeccapurple;
        background: url(./img/OIP-C.jpg)  center;
        background-size: 13%;
        background-repeat:  round;
        margin: 100px 0;
    }

• 示例图

background-position定位起始位置

• 可以支持将背景图定位到当前容器的指定位置
• 属性包括,left,right,top和bottom. 可以指定背景图距离边框的距离

    <div class="position"></div>
    // css
     .position {
            width: 300px;
            height: 300px;
            border: 1px solid rebeccapurple;
            background: url(./img/OIP-C.jpg) no-repeat center;
            background-position: bottom 50px right 80px;
            background-size: 200px 200px;
        }

• 效果图