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）
- 可以提供三或四个参数
