lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!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>
        /* 
        css样式中 后面的层级会覆盖前面的层级
            id选择器
            写法：
                在body里
                开始标签中 id="xxx"
                在style中
                #xxx {样式....}
        */
        #box {
            /* 样式 */
            width: 600px;
            height: 500px;
            /* background: red; */
            background: url("./images/img01.gif");
            /* background-repeat: no-repeat; */
            /* background-position: 20px 50px; */
            background: url('./images/img01.gif') no-repeat center;
            background-size: contain;
        }

        #box1 {
            width: 200px;
            height: 200px;
            background: yellow;
        }

        /* 
            背景 background:color image repeat position复合属性
            background-color 背景颜色
            background-image:url("路径") 背景图片
            background-repeat 背景图片重复方式
                repeat-x 水平重复
                repeat-y 垂直重复
                no-repeat 不重复
            background-position 背景图片位置
            background-size 背景图片尺寸
                cover 全覆盖
                contain 等比例放到最大
            
        */
    </style>
</head>

<body>
    <!-- id选择器 -->
    <div id="box">
        <!-- <div id="box1"></div> -->
    </div>
</body>

</html>