Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上。
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来,一是造成资源浪费,二是会导致访问速度变慢。
把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题。
我们来看看实现条件:
1.要有装图片的容器宽高
2.引用背景图的文件
3.精准定位改图(background-position的值(默认为(0,0))
例如:要使用此图片的第一个为图标,并且鼠标悬停变成第二个红色
html代码:
书写装小图片的容器,我这里用<i>标签
cssd代码:
在css中需要这是该图片的宽高,用Photoshop可以测量,我这里用的是行内元素,要设置宽高需要转块
完成的效果如下:
当鼠标悬停时变色
对应刚刚<i>的类名small-icon1施加样式
对应css代码:
当鼠标悬停显示的是红的的小图标则需要定位到红色的位置,那我们 需要测量出X Y轴的位置,0,0为起点,向上移动则x为负数.
效果如下:
想要实现哪一个图片就定位拖的位置,书写代码例,position:-22px -40px;
Sprite(雪碧图)的应用的更多相关文章
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- compass框架的sprite雪碧图的用法简要
---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...
- 【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- compass制作sprite雪碧图
1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...
随机推荐
- KongCLI参考
Introduction Kong提供的CLI(Command Line Interface)允许您启动.停止和管理Kong实例.CLI管理您的本地节点(如当前机器上的本地节点). If you ha ...
- 执行yum提示错误:rpmdb: BDB0113 Thread/process 424227/139826856310848 failed
[问题]在执行yum安装或者其他命令时,有如下提示: [解决办法:重新构建rpm数据库] [root@cly ~]# cd /var/lib/rpm [root@cly rpm]# ls Basena ...
- mybatis的plugin
1.Mybatis-Plugin的设计思路 听起来一个挺神奇的单词,插件.说白了就是使用了Jdk自带的动态代理.在需要的时候进行代理.AOP怎么用,他就怎么用. Plugin类等价于Invocatio ...
- 部署Redis4.x单机版及配置RDB和AOF持久化
一.环境及软件 OS soft version CentOS 7.5 redis-4.0.12(目前是4.x最新) 二.下载及编译Redis [root@localhost ~]# wget h ...
- ubuntu16安装dhcp server
目录 操作命令 apt-get install -y isc-dhcp-server vi /etc/default/isc-dhcp-server 我的修改内容为INTERFACES="e ...
- css常见布局问题
1.如何实现一个盒子在页面中上下左右居中 方法一:(盒子宽高固定时) .box{ width:400px; height:200px; background:#000; position:absolu ...
- 逆向工程vgenerator(二)
前言 接上篇,这一篇主要的工具类和工厂类,包括数据库方法.通用方法,三个工厂. 常量 /** *author vvxtoys *默认xml开头 *文档分隔 *默认方法名 */ package cc.v ...
- 爬虫基础——HTTP基本原理
## 学习爬虫务必从了解请求网页的工作流程和网页的组成原理开始,不然直接去学爬虫操作像是请求库等等,大概率会知其然而不知其所以然(个人体会) URL和HTTP简介 URL(Uniform Resour ...
- java 括号匹配 成对
import java.util.Stack; public class Solution { public static void main(String[] args) { Solution s ...
- c语言实现:扫雷
问题描述:相信大多数人都很熟悉扫雷游戏,在n*n的雷盘上随机埋上一些雷,玩家翻开一个非地雷格时,该格将会出现一个数字——提示周围格子中有多少个是地雷格.游戏的目标是在不翻出任何地雷格的条件下,找出所有 ...