H5雪碧图

最新推荐文章于 2022-12-23 00:09:30 发布

一只头秃的死肥宅

最新推荐文章于 2022-12-23 00:09:30 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： HTML5 新手样式背景雪碧图

本文链接：https://blog.csdn.net/xuemoKingDeath/article/details/69944051

版权

HTML5 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!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在范围内设置背景图截取想要的部分
通过图片移动来实现，移动方向为负