代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>048-053</title>
</head>
<body>
<style>
div{
width: 500px;
height: 500px;
background-color: aqua;
background-image: url(https://qlogo3.store.qq.com/qzone/1312675554/1312675554/100?1675060725);
}
.d2{
background-repeat:repeat-x ;
}
.d3{
background-repeat:repeat-y ;
}
.d4{
background-repeat:no-repeat ;
background-position: center center;
}
.d5{
background-repeat:no-repeat ;
background-position: center center;
background-size:cover; /*contain; */
}
.d6{width:100000px;
height: 1000px;
background-repeat:no-repeat ;
background-attachment: fixed;
}
.d7{width:100000px;
height: 1000px;
background-repeat:no-repeat ;
background-attachment: fixed;
background-position: center center;
}
.d8{width:100000px;
height: 1000px;
background-repeat:no-repeat ;
background-attachment: fixed;
background-position: right bottom;
}
</style>
<div class="d1"></div>
<hr>
<div class="d2"></div>
<hr>
<div class="d3"></div>
<hr>
<div class="d4"></div>
<hr>
<div class="d5"></div>
<hr>
<div class="d6"></div>
<div class="d7"></div>
<div class="d8"></div>
</body>
</html>