雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上。

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来,一是造成资源浪费,二是会导致访问速度变慢。

把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题。

我们来看看实现条件:

1.要有装图片的容器宽高

2.引用背景图的文件

3.精准定位改图(background-position的值(默认为(0,0))

例如:要使用此图片的第一个为图标,并且鼠标悬停变成第二个红色

html代码:

书写装小图片的容器,我这里用<i>标签

cssd代码:

在css中需要这是该图片的宽高,用Photoshop可以测量,我这里用的是行内元素,要设置宽高需要转块

display: inline-block;
再来引用图片,用background:url(输入路片路径)
background-image: url("../img/icon.png");
由于这小图片就是第一个,所需定位的就是该宽高

完成的效果如下:

当鼠标悬停时变色

对应刚刚<i>的类名small-icon1施加样式

对应css代码:

当鼠标悬停显示的是红的的小图标则需要定位到红色的位置,那我们 需要测量出X Y轴的位置,0,0为起点,向上移动则x为负数.

效果如下:

想要实现哪一个图片就定位拖的位置,书写代码例,position:-22px -40px;

Sprite(雪碧图)的应用的更多相关文章

  1. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  2. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  3. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  4. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  5. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  6. compass框架的sprite雪碧图的用法简要

    ---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...

  7. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  8. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  9. compass制作sprite雪碧图

    1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...

随机推荐

  1. OSPFV3综合实验 (第三组)

    拓扑图 本次试验规划:拓扑分4个区域,其中区域2采用帧中继实现区域内互通的前提下配置OSPF.ospfv3.R7与R8之间配置rip实现互通,区域1作为nssa区域,实现路由注入.最终实现全局互通. ...

  2. 你真的理解了for循环吗?反正我是没有

    for循环的执行步骤 咱们先来看一个有意思的关于for循环的程序 public class TestFor { public static void main(String[] args) { int ...

  3. MAP File

    https://warpproject.org/trac/wiki/howto/Linker_scripts_MAP_files Description A MAP file is an output ...

  4. Android学习笔记二之初始Activity

    初识Activity,跟着教程学习敲了一遍这一章的内容,下面根据目录结构总结知识点: 一.活动是什么 上篇博文中我们提到了Android四大组件,其中有一个Activity,我们将之称为活动.活动是最 ...

  5. 无法启动此程序,因为计算机中丢失VCRUNTIME140.dll 尝试重新安装此程序以解决此问题

    最近在阿里云上租了个服务器,想借此发布一些自己制作的网页.于是就打算安装一下环境,考虑到搭建动态网站所要安装的环境比较多,于是就选择了wampserver这样一个集成环境的安装. 由于我的服务器很新( ...

  6. hyper-v下的ubuntu虚拟机分辨率修改

    修改/etc/default/grub sudo vim /etc/default/grub 改变前: GRUB_CMDLINE_LINUX_DEFAULT="quiet splash&qu ...

  7. C# xml 读xml、写xml、Xpath、Xml to Linq、xml添加节点 xml修改节点

    #region XDocument //创建XDocument XDocument xdoc2 = new XDocument(); XElement xel1= new XElement(" ...

  8. mongo 数据库

    一.管理mongo 配置文件在/etc/mongod.conf 默认端口27017 启动                    sudo service mongod start 停止         ...

  9. Javascript 继承和多态

    近期通过一些巧合 或者说 思想转变吧 ... 想通过blog && 公众号 (个人公众号: KeepinJS)去记录自己的Javascript深度学习的内容,从而达到 进一步的自我提升 ...

  10. PG数据基本命令——连接(笔记)

    在PostgreSQL中,有以下类型的连接: 内连接(INNER JOIN) 左外连接(LEFT OUTER JOIN) 右外连接(RIGHT OUTER JOIN) 全连接(FULL OUTER J ...