lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536
							<!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: 200px;
            height: 200px;
            border:3px solid black;
            /* 背景图片 */
            /* 背景图片默认为图片的原始尺寸 */
            /* 如果单个图片无法显示完整 可以使用背景图片的重复出现直到铺满元素 */
            /* background-image: url("./img/qq.png"); */
            background-image: url("./img/banner.jpg");
            /* 背景重复  no-repeat 不重复 */
            background-repeat: no-repeat;
            /* 图片尺寸 */
            /* 可以写数值 第一个参数为宽度 第二个参数为高度 */
            /* 可以写百分比 第一个参数为宽度 第二个参数为高度 */
            /* background-size: 100% 100%; */
            /* cover  图片会等比例缩放 直到图片完全覆盖元素 但有可能出现图片不完整 */
            /* contain  图片会等比例缩放 保证图片完整 直到图片完全显示在元素内 但有可能出现空白区域 */
            background-size: cover;
            /* 背景图片位置 */
            /* 两个值 第一个参数为横向位置 第二个参数为纵向位置 */
            /* left right top bottom center 以及数值 */
            background-position: -20px -20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>