css 之background (二): 背景图像的尺寸与定位

background-size: [ | | auto ]{1, 2} | cover | contain
定义背景图片的尺寸
初始值为auto auto

如果不设置此属性,则图片不会进行拉伸与收缩,会按初始尺寸渲染.(超出绘制区域不显示, 小于绘制区域则默认会repeat)

一个例子:

    .demo {
        width: 400px;
        height: 200px;
        background-color:aqua;
        background-image: url(./dog.jpg);
        background-repeat: no-repeat;
        background-size: 200px auto;
    }

image.png

如果只定义一个值,则表示图片的宽,第二个值为auto(等比缩放)
cover | contain均是将图片进行等比缩放,而判断缩放结束的基准不同:
cover将背景图像等比缩放到完全覆盖容器(宽或高有可能会超出容器)
contain将背景图像的宽或高等比缩放到容器内(背景图像始终被包含在容器内)
一个例子:

    .demo {
        width: 400px;
        height: 200px;
        background-color:aqua;
        background-image: url(./dog.jpg);
        background-repeat: no-repeat;
        background-size: contain;
    }

image.png

background-position: | | center | left | right | top | bottom
初始值: left top (0% 0%)
background-position定位背景图片的初始位置

一个比较复杂的例子:

        width: 100px;
        height: 100px;
        padding: 20px;
        border: 20px dashed antiquewhite;
        background-image: url(./dog.jpg);
        background-repeat: no-repeat;
        background-clip: padding-box;
        background-origin: content-box;
        background-size: 140px 120px;
        background-position: left bottom 0px;

image.png

这个属性是相对于background-origin 来定义初始位置的

• 数值可以为负
• 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）
• 可以提供三或四个参数