lovecoding
/
VIP26


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 像素 px */
            /* 宽度 width */
            /* 高度 height */
            /* 颜色 color */
            /* 背景 background */
            /* 背景色 background-color */
            /* 背景图片 background-image:url("引入图片路径") */
            /* 背景平铺 background-repeat:
                no-repeat 不平铺
                repeat-x 横向平铺
                repeat-y 纵向平铺
                repeat 平铺
            */
            /* 背景尺寸 background-size
                cover 全覆盖
                contain 等比例放大
            */
            /* 
                背景位置 background-position
                一个值：
                同时代表x y轴
                两个值的情况：
                1.x轴 y轴
                2.right/left top/bottom                  
            */
            /* 
                background 复合属性
                background: color image repeat position;
            */
            width: 300px;
            height: 300px;
            color: red;
            background-image: url("./images/img01.gif");
            /* background:yellowgreen; */
            /* background-color: yellow; */
            background-repeat: no-repeat;
            /* background-size: cover; */
            background-position:200px;
            
        }   
        .main {
            width: 900px;
            height: 400px;
            /* background: red url("./images/img01.gif") no-repeat; */
            background-color: blueviolet;
            background-image: url('./images/img01.gif');
            background-repeat: no-repeat;
            /* background-size: cover; */
            background-position: right bottom;
        }
    </style>
</head>
<body>
    <!-- <div class="box"></div> -->
    <div class="main"></div>
</body>
</html>