CSS——精灵图与背景图片定位
2024-10-01 01:55:24
精灵图产生背景:
1、网页上的每张图像都需要向服务器发送一次请求才能展现给用户。
2、网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites)
精灵图的定义:
1、很多图片融合在一张图上,通过背景定位的方式将图标显示在每个盒子中。
2、背景定位的方式主要通过控制x和y轴的值。
精灵图使用技巧:
1、一般情况:直接一个盒子,里面的背景图片是精灵图,使用时注意x轴和y轴。
2、特殊情况:盒子中有一个小图标,此时,小图标外套一个标签(i标签或者span),给小图标设置定位后(自动转成行内块)定义宽高,这个宽高就是精灵图中的小图的宽高,然后注意x轴和y轴的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 68px;
height: 30px;
background: url("qq.png") -877px -201px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
最新文章
- Redis链表实现
- GDI+中发生一般性错误的解决办法
- 使用X-UA-Compatible来设置IE浏览器兼容模式(转)
- String.prototype.substr()
- Python学习路程day1
- android 布局之滑动探究 scrollTo 和 scrollBy 方法使用说明
- poj 3518 Corporate Identity 后缀数组->;多字符串最长相同连续子串
- 浅谈Servlet(一)
- Linux环境g++编译TinyXML动态库
- Codility---MaxProfit
- session 与 coolie 的区别与联系
- C# - 设计模式 - 模板模式
- [Swift]LeetCode214. 最短回文串 | Shortest Palindrome
- springmvc+hibernate
- 浅谈 drop、truncate和delete的区别
- WebActivatorEx—动态注册httpmodle
- favi.icon是什么?
- sql视图中写case判断null值
- [入门阅读]怎样在android中解析JSON
- go defer注意点,很容易出错的!!!
热门文章
- [K/3Cloud]有关单据显示行数限制和数据导出的建议
- 互联网DSP广告系统架构及关键技术解析
- poj——1006 生理周期
- Lein: Exception in thread ";Thread-3"; java.net.ConnectException: Connection refused
- win7下登入本機、域的正確方法
- Linux下Shell编程
- jQuery鼠标悬停显示提示信息窗体
- VB Socket编程 框架
- Eclipse下单个文件中文乱码问题
- linux内核中的宏ffs(x)