CSS背景

background-repeat: no-repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

背景图定位取值

background-position: center;

background-position: bottom;

background-position: top;

background-position: right;

background-position: left;

background-position: left right;

background-position: 100px,100px;

背景图片尺寸

<!-- 宽度和高度固定 -->

<div class="d1"></div>

<!-- 宽度和高度不固定 -->

<div class="d2"></div>

.d1{

width: 600px;

height: 600px;

border: 5px solid red;

background-image: url(./3.png);

background-size: 100% auto;

}

.d2{

width: 100%;

height: 600px;

border: 5px solid red;

background-image: url(./4.png);

/* cover 铺满整个屏幕。多余的部分将会被裁掉 */

background-size: cover;

/* 至少有一张完整的图片，no-repeat情况下会留下空白 */

background-size: contain;

}