lovecoding
/
W250511


			
				
					
						
						
							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{
            /* width: 400px;
            height: 400px;
            border:5px solid black; */
            /* 背景图片 */
            /* 背景图片如果无法撑满当前元素 那么他会重复出现直至铺满 */
            /* background-image: url("./image/logo.png"); */
            /* 背景图片不重复 */
            /* background-repeat: no-repeat; */
            /* 背景图片尺寸 两个数值 第一个宽 第二个高 */
            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */

            /* background-image: url("./image/bg.jpg"); */

            /* background-size: 100% 100%; */
            /* 可以让背景图完整展示 保证比例 */
            /* background-size: contain; */
            /* 背景图可以铺满整个元素 但是会导致图片被裁减 */
            /* background-size: cover; */

            
        }

        .box{
            width: 400px;
            height: 400px;
            border:5px solid black;

            background-image: url("./image/logo.png");
            background-repeat: no-repeat;

            /* 背景图片定位 两个值 第一个横向移动 纵向移动*/
            /* background-position: 20px 20px; */
            /* background-position: right bottom; */
            background-position: center center;

        }
        /* 雪碧图 */
        .box2{
            width: 40px;
            height: 60px;
            border:1px solid red;
            background-image: url("./image/icon-slides.png");
            background-position: -40px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        hello world
    </div>

    <div class="box2">

    </div>
</body>
</html>