雪碧图是根据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. KongCLI参考

    Introduction Kong提供的CLI(Command Line Interface)允许您启动.停止和管理Kong实例.CLI管理您的本地节点(如当前机器上的本地节点). If you ha ...

  2. 执行yum提示错误:rpmdb: BDB0113 Thread/process 424227/139826856310848 failed

    [问题]在执行yum安装或者其他命令时,有如下提示: [解决办法:重新构建rpm数据库] [root@cly ~]# cd /var/lib/rpm [root@cly rpm]# ls Basena ...

  3. mybatis的plugin

    1.Mybatis-Plugin的设计思路 听起来一个挺神奇的单词,插件.说白了就是使用了Jdk自带的动态代理.在需要的时候进行代理.AOP怎么用,他就怎么用. Plugin类等价于Invocatio ...

  4. 部署Redis4.x单机版及配置RDB和AOF持久化

    一.环境及软件 OS soft version  CentOS 7.5   redis-4.0.12(目前是4.x最新) 二.下载及编译Redis [root@localhost ~]# wget h ...

  5. ubuntu16安装dhcp server

    目录 操作命令 apt-get install -y isc-dhcp-server vi /etc/default/isc-dhcp-server 我的修改内容为INTERFACES="e ...

  6. css常见布局问题

    1.如何实现一个盒子在页面中上下左右居中 方法一:(盒子宽高固定时) .box{ width:400px; height:200px; background:#000; position:absolu ...

  7. 逆向工程vgenerator(二)

    前言 接上篇,这一篇主要的工具类和工厂类,包括数据库方法.通用方法,三个工厂. 常量 /** *author vvxtoys *默认xml开头 *文档分隔 *默认方法名 */ package cc.v ...

  8. 爬虫基础——HTTP基本原理

    ## 学习爬虫务必从了解请求网页的工作流程和网页的组成原理开始,不然直接去学爬虫操作像是请求库等等,大概率会知其然而不知其所以然(个人体会) URL和HTTP简介 URL(Uniform Resour ...

  9. java 括号匹配 成对

    import java.util.Stack; public class Solution { public static void main(String[] args) { Solution s ...

  10. c语言实现:扫雷

    问题描述:相信大多数人都很熟悉扫雷游戏,在n*n的雷盘上随机埋上一些雷,玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有多少个是地雷格.游戏的目标是在不翻出任何地雷格的条件下,找出所有 ...