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 ...
随机推荐
- OSPFV3综合实验 (第三组)
拓扑图 本次试验规划:拓扑分4个区域,其中区域2采用帧中继实现区域内互通的前提下配置OSPF.ospfv3.R7与R8之间配置rip实现互通,区域1作为nssa区域,实现路由注入.最终实现全局互通. ...
- 你真的理解了for循环吗?反正我是没有
for循环的执行步骤 咱们先来看一个有意思的关于for循环的程序 public class TestFor { public static void main(String[] args) { int ...
- MAP File
https://warpproject.org/trac/wiki/howto/Linker_scripts_MAP_files Description A MAP file is an output ...
- Android学习笔记二之初始Activity
初识Activity,跟着教程学习敲了一遍这一章的内容,下面根据目录结构总结知识点: 一.活动是什么 上篇博文中我们提到了Android四大组件,其中有一个Activity,我们将之称为活动.活动是最 ...
- 无法启动此程序,因为计算机中丢失VCRUNTIME140.dll 尝试重新安装此程序以解决此问题
最近在阿里云上租了个服务器,想借此发布一些自己制作的网页.于是就打算安装一下环境,考虑到搭建动态网站所要安装的环境比较多,于是就选择了wampserver这样一个集成环境的安装. 由于我的服务器很新( ...
- hyper-v下的ubuntu虚拟机分辨率修改
修改/etc/default/grub sudo vim /etc/default/grub 改变前: GRUB_CMDLINE_LINUX_DEFAULT="quiet splash&qu ...
- C# xml 读xml、写xml、Xpath、Xml to Linq、xml添加节点 xml修改节点
#region XDocument //创建XDocument XDocument xdoc2 = new XDocument(); XElement xel1= new XElement(" ...
- mongo 数据库
一.管理mongo 配置文件在/etc/mongod.conf 默认端口27017 启动 sudo service mongod start 停止 ...
- Javascript 继承和多态
近期通过一些巧合 或者说 思想转变吧 ... 想通过blog && 公众号 (个人公众号: KeepinJS)去记录自己的Javascript深度学习的内容,从而达到 进一步的自我提升 ...
- PG数据基本命令——连接(笔记)
在PostgreSQL中,有以下类型的连接: 内连接(INNER JOIN) 左外连接(LEFT OUTER JOIN) 右外连接(RIGHT OUTER JOIN) 全连接(FULL OUTER J ...