CSS背景

1. 背景颜色background-color: royalblue;
2. 背景图background-image: url(./1.png)。只要插入的是背景图，都需要指定宽度和高度，否则不显示.如果指定的宽度和高度小于图片的尺寸，将会被截掉，如果过大，图片就会重复平铺
3. 默认的是从x轴平铺，平铺样式

   background-repeat: no-repeat;

   background-repeat: repeat-x;

   background-repeat: repeat-y;

4. 背景图定位取值

   background-position: center;

   background-position: bottom;

   background-position: top;

   background-position: right;

   background-position: left;

   background-position: left right;

   background-position: 100px,100px;

5. 背景图片尺寸

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

   <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;

   }