css精灵图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>sprites</title>

    <style>

.icon{

  width: 500px;

  height:500px;

  border:1px solid;

background: url(小图标.png) 0 0 no-repeat;

  display:block;

}

.ride{

  background-position:0 0;

}

.good{

  background-position:0 -88px;

}

    </style>

</head>

<body>

    <span class="icon ride"></span>

    <span class="icon good"></span>

</body>

</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,712评论 1赞 45
  • css+精灵图
    1）css精灵是一种处理网页背景图片的方式。精灵图也是一种背景图片。 2 )精灵图的使用1，使用fw一定要用打开的...
    huhu502阅读 402评论 0赞 0
  • 向打油诗人庐阳第一怪致敬
    简书有一位打油诗人“庐阳第一怪”，简书人都亲热地叫他乖乖！ 他确实怪怪又乖乖，怪就怪在秉性不阿，不奴眼卑骨，他的打...
    欧阳小川阅读 386评论 33赞 21
  • 一次促膝长谈
    当面对父母的时候，当面对子女的时候，当面对至亲之人的时候，开口说话并不困难，但有时想有一次敞开心扉的沟通却比登天还...
    黑页饮马槽阅读 664评论 0赞 0
  • 阅读推荐 虹树《岁月如歌》
    推荐理由 幸福生活，靠自己打拼！ 如歌岁月，让回忆温馨！
    刀子豆腐阅读 79评论 0赞 0