美文网首页Web前端之路让前端飞
css 之background (二): 背景图像的尺寸与定位

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

作者: mochase | 来源:发表于2017-06-08 18:00 被阅读385次

    background-size: [ <length> | <percentage> | 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: <percentage> | <length> | 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)
    • 可以提供三或四个参数

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/foltqxtx.html