lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
							<!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:3px solid black;
            /* 设置背景图片 */
            /* 背景图片默认为原始尺寸 */
            /* 如果图片不能把元素完全覆盖 默认情况下，背景图片会重复出现 直到铺满整个元素 */
            /* background-image: url("./img/baidu/wen.png"); */
            background-image: url("./img/img1.jpg");
            /* 背景图片尺寸 */
            /* 背景图片尺寸 可以设置为 宽度 高度 */
            /* background-size: 400px 400px; */
            /* background-size: 100% 100%; */
            /* cover 会缩放背景图片 以完全覆盖元素 图片会有溢出情况 溢出部分会被截取掉 */
            /* background-size: cover; */
            /* contain 会缩放背景图片 以完全装入元素 图片不会有溢出情况 */
            background-size: contain;
            /* 背景图片重复 */
            background-repeat: no-repeat;
            /* 背景图片位置 */
            background-position: center;
        }
        .box1{
            width: 400px;
            height: 400px;
            border: 3px solid black;
            background-image: url("./img/baidu/wen.png");
            background-repeat: no-repeat;
            /* 背景图片位置 两个值 第一个值 水平方向 第二个值 垂直方向 */
            /* background-position:  right bottom; */
            /* background-position:  center center; */
            background-position:  100px 50px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>