将多张图整合到一张大图中,再用css定位技术
2019独角兽企业重金招聘Python工程师标准>>>
以前做网站的时候,经常有地方要用小图标。第一次接触bootstrap的时候,下载打开它的源文件的时候只看到了两张图,就是包含很多小图标的大图。总所周知,bootstrap用到图标的地方很多,但是我一直不知道他们是怎么做到的。今天再写一个JavaScript demo的时候,又遇到了这个问题。所以就趁此机会研究了一下:
这是一种关于css sprites的技术,就是将多张图放在一张大图中,然后通过css的background-position属性来实现的。采用这种方法,有如下:
(1)通过整合图片,从而减少服务器的请求次数,加快加载速度。
要实现这个效果,还得研究一下background-position。
background-position说明:
该样式是指设置背景图片的位置:并且必须制定background-image属性,该属性定位不受对象的补丁属性( padding )设置影响。
可能的值:
(1)
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
当只给定一个值时,则第二个值默认为center
(2) x% y%
第一个指的是水平值,第二个指的是垂直方向上的值,左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值,另一个值将是 50%。
(3)x ,y
第一个值指的是水平方向上的具体偏移值,第二个值指的是垂直方向上的具体偏移值
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。
介绍完这一个关键的技术之后,要想实现最后的效果,还得需要你给所要设置的元素加一个高宽的限制,这样在无形中就相当于对整张背景图片进行裁剪。并且结合overflow:hidden属性。
实例:
在一个提交按钮中假如搜索背景图:
<input type="submit" class="submit" value=""/>
css样式:
.submit{background:#ffb900 url(hpc14.png) no-repeat; width:37px;height: 37px;border: 5px solid #ffb900;background-position: -224px -52p;overfkow:hidden;}
转载于:https://my.oschina.net/sunshinewyf/blog/483860
将多张图整合到一张大图中,再用css定位技术相关推荐
- 一张图看懂2017双11中的网络产品和技术
摘要: 大家都知道,2017年双11又创造了新纪录,全天交易额1682亿,交易峰值32.5万笔/秒,支付峰值25.6W笔/秒,狂欢的背后是极其复杂庞大的技术系统,其中就有大量阿里云云计算相关的产品和技 ...
- LATEX——两张图并列排列/双栏模板中图片通栏并列布局
LATEX--两张图并列排列/双栏模板中图片通栏并列布局 正常插入图片 并列插入两张图片 双栏模板中图片通栏并列布局1(不同图片使用不同标题,不同编号) 双栏模板中图片通栏并列布局2(不同图片使有不同 ...
- 从一张图开始,谈一谈.NET Core和前后端技术的演进之路
从一张图开始,谈一谈.NET Core和前后端技术的演进之路 邹溪源,李文强,来自长沙.NET技术社区 一张图 2019年3月10日,在长沙.NET 技术社区组织的技术沙龙<.NET Core和 ...
- vue中将链接转二维码图片,2张图合成为1张图
1.将链接转为二维码图片 首先,下载插件:npm install qrcodejs2 --save html代码如下: <div ref="qrcode" style=&qu ...
- 一张图了解python_一张图学会python
提到一张图,大多数人都知道,有人问一张图学会python,当然了,还有人问python 将多个列表合并成一个,这到底是咋回事?其实python删除列表元素呢,接下来小编为大家分享一张图学会python ...
- 24张图7000字详解计算机中的高速缓存
文章目录 1. 什么是缓存 2. 缓存的定义 3. 计算机中的高速缓存 3.1 高速缓存相关名词 3.2 计算机中的高速缓存存储器模型 3.3 计算机中有哪些缓存 3.4 硬件读取高速缓存的过程 4. ...
- 一张图理解+巧记 概率论中的泊松公式
- 30张图轻松理解HTTP在面试中所有会出现的题【秋招系列】
前言 又是一年秋招与跳槽热闹的开展着,而在面试过程中,HTTP 被提问的概率还是非常高的. 我搜集了 5 大类 HTTP 面试常问的题目,同时这 5 大类题跟 HTTP 的发展和演变关联性是比较大的, ...
- dev gridview 打印列数过多_R语言:如何将多张统计图绘制在一张上面
在使用R语言进行数据可视化的时候,常常需要将多张统计图表绘制在同一张图上面,从而更高效地传递信息,下面我们就来一起看看具体如何实现. 一.使用R语言自带的函数绘制的图像 R语言本身就已经内置了许多绘图 ...
最新文章
- Sequelize 4.43.0 发布,基于 Nodejs 的异步 ORM 框架
- 真牛X!这款通用数据库连接工具DBeaver!可以连接和操作市面所有的数据库!...
- SAP PM模块实施难点与重点
- mysql性能的介绍少_MySQL性能突然下降怎么回事 MySQL性能突然下降原因介绍
- mfc程序转化为qt_工控编程,Qt 学习之路
- hexo博客生成博文,当生成的文章数量超过1000时,耗尽所有内存资源后出现out of memory
- 树莓派设置NTP同步
- 分布式理论、架构设计(自定义RPC)
- 深入理解JavaScript this
- 就php干活,php可以做什么?,懂得这些技巧就够了
- 手游接入Facebook的那些坑
- 2019 The Preliminary Contest for ICPC China Nanchang National Invitational
- 51单片机驱动LCD1602液晶
- IT转型之路(一) 迷茫、困惑
- CTF_RSA_N不互素
- 张赐荣 | 详解SAPI5语音转换扩展XMLTTS标记
- 南京邮电大学——陈健教授
- html 图片自动滚动播放,CSS3如何实现图片滚动播放效果(附代码)_WEB前端开发...
- 三坟五典八索九丘四书五经
- 易恢复15版EasyRecovery电脑数据恢复软件