多个图标图片(雪碧图)使用CSS样式显示

现在的网页中显示很多图标算是常态,发现项目中页面上用到的图标都是单个图标单个文件,用的时候直接往页面上挂,这确实很常态。

如果,网站是挂在外网上,或者网速过低,又大量使用图标的情况下,由于浏览器和服务器的并发连接数是受限的,通常是4~8个,那么图标显示过慢或者超时的情况就会发生。

当然了,像采用CDN,或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的,但不是都有这样的条件。

一般都会把图标文件做的尽可能小,尽管如此,1张50k的文件比起50张1k文件下载起来还是很有优势的。

那么,要如何将一个图片中的单个图标显示在页面中,因为没有切分图片的功能。

首先,假设我们的图标图片是tree view中常用的:

做一个简单的页面,放两个div,需要在这两个div上分别显示文件夹和文件图标。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>        </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>

显示方法很简单,就是将元素的大小设成图标的大小,图片作为元素的背景,设置图片的left和top让对应的图标被显露出来。

定义一个默认的样式,规定元素的大小,这里的图标是32*32,照样设置元素的大小。

.tree-default {
    width:32px;
    height:32px;
}

定义文件夹图标的显示样式,就是讲图标图片作为背景,按照图标的位置调整left和top坐标值。

.tree-folder {
    background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}

定义文件图标的显示样式,调整文件图标所在的位置。

.tree-file {
    background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}

再给元素设上样式。

<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>

完成后的效果:

这样的处理也不是没有条件,单张图片也要尽可能的压缩,不是所有的图标都在一张图片上,可将常用的放在一张图片上,如果过多可分成多张图片放置。

所有代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .tree-default{
                width:32px;
                height:32px;
            }

            .tree-file{
                background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
            }

            .tree-folder{
                background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
            }

        </style>
    </head>
    <body>
        <div class="tree-default tree-file"></div>
        <div class="tree-default tree-folder"></div>
    </body>
</html>

原文地址:https://www.cnblogs.com/xiaxue168/p/10744636.html

时间: 2024-11-02 01:59:11

多个图标图片(雪碧图)使用CSS样式显示的相关文章

使用雪碧图(CSS sprite)

CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. 使用雪碧图的优点有以下几点: 将多张图片合并到一张图片中,可以减小图片的总大小 将多张图片合并到一张图片后,只需一次网络请求就可以将所需的资源全部下载,减小建立连接的消耗,在移动端尤为明显 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也

雪碧图,列表样式以及列表样式实现导航栏布局

雪碧图 <style> div { height: 28px; width: 28px; background-repeat: no-repeat; background-image: url("../../img/xuebitu.gif"); } #div2 { background-position: -85px 0; } #div3 { background-position: -163px -30px; } </style> <title>雪

使用 Compass 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转

css 雪碧图 及jquery定位代码

无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(sprite) 也叫雪碧图. CSS知识点: background-image backgorund-position 特点: 相对于当个小图标,它节省文件体积和服务请求次数.将所有零碎的网页背景图片整合到一起,这样做可以有效的减少http对图片的请求次数,而不需要加载多次加载零碎的背景图片,所以合理的利

css script 雪碧图 动态更改背景

最近了解了雪碧图,css script.然后自己去做了下发现好好玩,可以把所有的图片做成一张图,然后更改background-position的值来显示不同的背景. 做完以后我发现,以前经常做的点击或者悬浮啊等等事件改变img完全可以用一张图,再也不用找图标了/(ㄒoㄒ)/~~感动 先放下做的效果: 这是四个li,要求是点击每个li会改变对应的背景,结果是这样→_→ 下面来说说实现方法,超简单啦~如果你自己不亲自PS雪碧图 1.首先把你所需要的所有图片做成一张雪碧图,像这样? 2.生成每个图片的

web前端入门到实战:css之background-position属性实现雪碧图

什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分. 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象. 用雪碧图有什么弊端 个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端.如果你的雪碧图很大又复杂的话就有出现css代码复查,网页占内存大等各种问题. 实例 上面是一个按钮

CSS Sprite雪碧图应用

CSS Sprite CSS雪碧图 为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 雪碧图使用场景: 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载数量比较大 4.一些大图不建议拼成雪碧图 (减少HTTP请求数,加速内容显示) 雪碧图实现原理:background-position 移动位置时,坐标都需要设置成负值 雪碧图生成方式 1.PS手动拼图 2.大项目通常使用

使用Compass制作雪碧图

遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/ 作者Thoriq Firdaus 译者zEx 前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重.图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图. CSS雪碧图就是将

css sprite 雪碧图

一.什么是雪碧图? 1.我们先来看一下淘宝上面用到的雪碧图实例: a.前端展示 b.css雪碧图为 2.概念 CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 3.什么时候用到雪碧图? a.静态图片,不随用户信息的辩护而变化 b.小图片,图片容量比较小 c.加载量比较大 4.工具介绍 刚刚下载了一个比较实用的雪碧图工具Css Spri