HTML5第五课时，雪碧图的应用！！

57 阅读 0 评论 38 点赞

我是靠谱客的博主淡淡彩虹，最近开发中收集的这篇文章主要介绍HTML5第五课时，雪碧图的应用！！，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        /*container加空格，表示这个id的div下的子类所有div！所有的div，后代选择器。
          如果是#container>div,是子代选择器，只影响儿子，不影响其他人，
          其中color属性影响无数后代。*/
        .container div{
            height: 20px;
            width: 25px;
            background-image: url("../../image/xbt.gif");
            background-repeat: no-repeat;
        }
        #div2{
            background-image: url("../../image/xbt.gif");
            background-position: -42px -3px;
            /*移动图片所在的位置，雪碧图的重要应用方法。*/
        }
        #div3{
            background-image: url("../../image/xbt.gif");
            background-position: -165px -30px;
        }
    </style>
    <title>雪碧图</title>
</head>
<body>
<div class="container">
    <div></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>
</body>
</html>