网页中多个图标在一张图片上，使用css将各图标显示

偏执的太偏执、 2022-05-16 05:19 219阅读 0赞

test.png

![70][]

完整的代码：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
    	    .tree-default{
                    width:100px;
                    height:100px;
                    margin:50px;  /*为了查看的效果更明显*/
                    border-radius: 10px;
                    border:1px #e8e8e8 solid;
                }
                .tree-font{
                    background: url("test.png") -200px -100px no-repeat;
                }
                .tree-time{
                	/*background-color: */
                    background-image: url("test.png");
                    background-repeat: no-repeat;
                    background-position: -100px -150px;
                    background-size:250px 200px;   /*整张图片都变小之后再计算偏移量*/
                }
            </style>
        </head>
        <body>
            <div class="tree-default tree-font"></div>
            <div class="tree-default tree-time"></div>
        </body>
    </html>

完成后的效果：

![70 1][]

[70]: /images/20220516/b15ded492d0e451d96163b6268569ce1.png
[70 1]: /images/20220516/d663d878239c47c1bda45eb1187c6be8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是字体图标（Icon Font）？如何在网页中使用字体图标？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 字体图标（Icon Font） ⭐ 如何在网页中使用字体图标 ⭐ 写在最后 ------------

傷城~/ 2023年10月15日 11:16/ 0 赞/ 33 阅读

相关将svg图片转为字体图标

[icomoon链接][icomoon] 通过icomoon将svg图片转为字体图标的步骤如下：点击icomoon app按钮

梦里梦外;/ 2023年03月13日 13:17/ 0 赞/ 67 阅读

相关在CSS中使用字体真棒图标

本文翻译自：[Use Font Awesome Icons in CSS][] I have some CSS that looks like this: 我有一些看起来像这

「爱情、让人受尽委屈。」/ 2022年11月28日 10:35/ 0 赞/ 191 阅读

相关 CSS 图标

CSS 图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

冷不防/ 2022年11月13日 05:21/ 0 赞/ 205 阅读

相关 html图标右上角添加小图标,图片右上角增加删除图标(css布局示例)

【实例简介】【实例截图】 ![002b4c2b148e10bf43d68e72dbc50b66.png][] 【核心代码】删除图标示例 .img-wrap \{

悠悠/ 2022年10月06日 03:53/ 0 赞/ 483 阅读

相关 100多个纯CSS3动画图标

这次我们要来分享一组纯[CSS3][]打造的动画图标，总共100多个，每一个图标没有用图片，而是利用CSS3的相关特性来实现。在这些CSS3图标中，有部分是动态的，这些带动画的

向右看齐/ 2022年08月04日 16:53/ 0 赞/ 396 阅读

相关网页使用SVG图标

<html> <style> .logo{ background-repeat:no-repeat; background-i

浅浅的花香味﹌/ 2022年05月28日 14:07/ 0 赞/ 262 阅读

相关网页中多个图标在一张图片上，使用css将各图标显示

test.png ![70][] 完整的代码： <!DOCTYPE html> <html> <head> <me

偏执的太偏执、/ 2022年05月16日 05:19/ 0 赞/ 220 阅读

相关 CSS-精灵图片的使用（从一张图片中截图指定位置图标）

目录一、名词解释二、使用难点三、使用步骤四、程序源码 -------------------- 一、名词解释在网页中，我们可以看到有很多的小

不念不忘少年蓝@/ 2022年05月06日 04:00/ 0 赞/ 225 阅读

相关 css中使用一张图片显示多个背景

不知你有没有经历过，看到网页上的一些漂亮的图标，如列表图标，于是把它下载，打开一看，竟然不是我们下载的单个图标，而是一张大图，上面集合着许多小图标！这里便使用了CSS

蔚落/ 2022年04月14日 05:38/ 0 赞/ 502 阅读