CSS知识点

九宫格背景图位置:

首先导入一张大图

.tu {

background-image: url(p2.jpg);

}

然后固定每个小九宫格的大小(每个小九宫格里都有一张只露出左上角的大图)

div {

width: 200px;

height: 200px;



}

然后设定大图在每个小九宫格里的位置,移动方式,靠近坐标轴为负,远离坐标轴为正

 #z-1 {

        background-position: 0px 0px;

    }

    #z-2 {

        background-position: -200px 0px;

    }

    #z-3 {

        background-position: -400px 0px;

    }

    #z-4 {

        background-position: 0 -200px;

    }

    #z-5 {

        background-position: -200px -200px;

    }

    #z-6 {

        background-position: -400px -200px;

    }

    #z-7 {

        background-position: 0px -400px;

    }

    #z-8 {

        background-position: -200px -400px;

    }

    #z-9 {

        background-position: -400px -400px;

    }