作业-九宫格 - - php.cn博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景定位九宫格</title>
    <style>
        body{
            padding: 10px 0 10px 0; margin:0;
        }
        .cell{
            width:300px; height: auto; overflow: hidden; margin: 0 auto;
        }
        .cell > .cell-item{
            width:100px; height: 100px; background-image: url('https://img.php.cn/upload/image/677/687/658/1651935342393288.jpg'); background-repeat: no-repeat; float: left;
        }
        .cell > .cell-item:nth-child(1){
            background-position: -11px -8px;
        }
        .cell > .cell-item:nth-child(2){
            background-position: -121px -8px;
        }
        .cell > .cell-item:nth-child(3){
            background-position: -231px -8px;
        }
        .cell > .cell-item:nth-child(4){
            background-position: -341px -8px;
        }
        .cell > .cell-item:nth-child(5){
            background-position: -451px -8px;
        }
        .cell > .cell-item:nth-child(6){
            background-position: -561px -8px;
        }
        .cell > .cell-item:nth-child(7){
            background-position: -671px -8px;
        }
        .cell > .cell-item:nth-child(8){
            background-position: -781px -8px;
        }
        .cell > .cell-item:nth-child(9){
            background-position: -891px -8px;
        }
    </style>
</head>
<body>
    <div class="cell">
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
        <div class="cell-item"></div>
    </div>
</body>
</html>