web前端sprite，精灵图，雪碧图
css sprite
俗称：精灵图，雪碧图，指将整个页面不同的图片or图标合并在一张图上；
优点：使用CSS Sprite 可以减少网络请求，提高网页加载性能，不会出现网页上端加载完毕下面还在加载中这一问题
缺点：如果后期更改其中某一图标，且其像素大小发生改变，需要重新对所有图标进行定位
精灵图制作：
photoshop选择透明图层，将需要的图标和图片放入
测试用图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
margin: 50px;;
} #box a{
display: block;
width: 74px;
height: 20px;
border: 1px solid #ccc;
color: black;
font-size: 12px;
text-decoration: none;
text-align: center;
border-top: none;
padding-top: 54px;
background-image: url(icon.png);
}
#box #zone{
border-top:1px solid #CCCCCC;
background-position: -17px 4px;
background-repeat: no-repeat;
}
#box #zone:hover{
background-position: -17px -98px;
}
#box #mail{
background-position: -12px -186px;
background-repeat: no-repeat;
}
#box #mail:hover{
background-position: -12px -286px;
}
</style>
</head>
<body>
<div id="box">
<a href="#" id="zone">空间</a>
<a href="#" id="mail">邮箱</a>
</div> </body>
</html>
web前端sprite，精灵图，雪碧图的更多相关文章
- css sprite，css雪碧图生成工具V3.0更新
V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...
- 前端优化：css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- CSS Sprite、CSS雪碧图应用实例
CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”, ...
- 方便前端使用的SVG雪碧图
更多代码详情:github.crmeb.net/u/LXT 简介 由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不同分辨率.不用担心模糊和锯齿.同时还能更改图标的填充 ...
- css 雪碧图 及jquery定位代码
无意间发现了一个很神奇的事情,就是 鼠标悬停在图片上方会切换,起初以为图标是单独插入的.但发现居然是一张完整的图片. 一万只草泥马在心中奔腾.这是怎么实现的? 后来询问得知,这是css精灵技术(spr ...
- CSS Spritec下载,精灵图，雪碧图，初探之原理、使用
CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零 ...
- CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解、雪碧图和精灵图）
一.各种背景属性 1.background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
随机推荐
- vue iView table中render渲染
<template> <div class="srm-page"> <el-form ref="form" :model=&quo ...
- MySQL基础篇(04)：存储过程和视图，用法和特性详解
本文源码:GitHub·点这里 || GitEE·点这里 一.存储过程 1.概念简介 存储程序是被存储在服务器中的组合SQL语句,经编译创建并保存在数据库中,用户可通过存储过程的名字调用执行.存储过程 ...
- 1046 划拳 (15 分)C语言
划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢了,输家罚一杯酒.两人同赢或两人同输 ...
- Eclipse配置运行内存
对于一些大的项目,运行时等待过长可能出现内存溢出现象,需要重新配置IDE运行内存大小,如下: 1.配置Eclipse.ini 如图再改大点: -Xms512m-Xmx512m 2.JDK内存扩大 Wc ...
- Codeforces Round #609 (Div. 2)前五题题解
Codeforces Round #609 (Div. 2)前五题题解 补题补题…… C题写挂了好几个次,最后一题看了好久题解才懂……我太迟钝了…… 然后因为longlong调了半个小时…… A.Eq ...
- GXOI&GZOI
T1 与或和 2s&&512MB 简明题意:求一个矩阵的所有子序列的 \(and\)和 和\(or\)和: 子矩阵的\(and\)和就是所有值\(and\)起来:\(or\)类 ...
- Antd组件库使用方法
零.介绍: Ant design,是阿里巴巴的蚂蚁金服公司设计的一套适应用于web端和移动端网页的Ui组件库,组件好看,非常适合React框架使用. 官网:https://ant.design/ind ...
- Jaeger容器化部署
概述 Jaeger是由Uber开源的分布式追踪系统,一套完整的Jager追踪系统包括Jaeger-client.Jaeger-agent.Jaeger-collector.Database和Jaege ...
- JS的var和let的区别（详细讲解）
let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版.下面我就来详细讲讲var和let的区别 相同点: var和let都有函数级作用域 不同点: (1)var是全局作用域 ...
- List去重问题与方法
面试中经常被问到的list如何去重,用来考察你对list数据结构,以及相关方法的掌握,体现你的java基础学的是否牢固.我们大家都知道,set集合的特点就是没有重复的元素.如果集合中的数据类型是基本数 ...