H5雪碧图

来源：互联网发布：奇异值阈值算法编辑：程序博客网时间：2024/04/29 21:41
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--雪碧图 指把所有要用的图标画在一个界面上 需要截取-->    <style>        /*空格 后代选择器 对选中的标签的所有下级都有作用*/        #container > div{            color: red;            width: 25px;            height: 25px;            background-image: url("../../img/xuebitu.gif");            background-repeat: repeat-y;        }        #div2{            background-position: -42px 0;        }        #div3{            background-position: 0 -127px;        }        #div4{            height: 300px;            background-color: blue;            background-image: url("../../img/xuebitu1.png");        }        /*子代选择器 用“>”锁定 */        #ul>li{            color: red;        }    </style>    <title>雪碧图</title></head><body><div id="container">    <div></div>    <div id="div2"></div>    <div id="div3"></div></div><ul id="ul">    <li>1</li>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>    </ul>    <li>2</li>    <li>3</li>    <li>4</li></ul><div id="div4">    </div></body></html>
通过定义一个div在范围内设置背景图截取想要的部分
通过图片移动来实现，移动方向为负
0 0