CSS3—雪碧图和滑动门

article/2025/3/10 10:25:12

一、CSS Sprite（雪碧图）

CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。
在这里插入图片描述

CSS Sprite原理：

其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的background-image、background-repeat、background-position属性，对这张大图进行定位。background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprite优点：
1. 利用CSS Sprite能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2. CSS sprite能减少图片的字节，(网络传输以字节为单位，1MB=1024千字节)，三张图片大小的总合大于拼成一张图片的大小。
3. 解决了命名困扰，只需要对一张图片命名，而非数十个小图片命名

用一句话来概述就是
“CSS Sprites(图片整合技术) 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。”

怎么制作CSS Sprite图

我们程序员一般通过雪碧图生成工具来制作雪碧图
在这里插入图片描述

在这里插入图片描述

如何使用雪碧生成工具

1.用PS把需要的图切出来
2.打开CssSprite.exe文件
下载地址：http://download.csdn.net/detail/wx247919365/8641795
3.点击左上角按钮打开图片
4.排列图片
可以点击按钮来排列，也可以自己拖动排列，拖动完程序会根据图片的位置生成面积最小的雪碧图
5.是否是手机端
勾选后雪碧图的大小会缩小2倍
6.代码生成
有sass和css两个选项，选择后者。sass是一种CSS预处理语言，能清晰的、结构化的描述文件样式。
7.大图类型要选择png，图片背景色为Transparent透明

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>雪碧图</title><style>div{width: 131px;height: 130px;border: 1px solid red;background-image: url("img/img.png");}.two{width: 131px;height: 162px;background-position: -131px 0;}.three{width: 131px;height: 162px;background-position: -262px 0;}</style>
</head>
<body><div  class="one"></div><div  class="two"></div><div  class="three"></div><div  class="fore"></div><div  class="five"></div><div  class="six"></div>
</body>
</html>

二、滑动门

1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。
1.2 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
1.3 最常见于各种导航栏的滑动门。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>滑动门</title><style>*{margin: 0;padding: 0;}a{margin: 100px;display: inline-block;/*千万不能设置宽*/height: 33px;background: url("img/lTcb_ve.png") no-repeat;padding-left: 15px;color: #fff;text-decoration: none;line-height: 33px;}a  span{display: inline-block;/*千万不能设置宽*/height: 33px;background: url("img/lTcb_ve.png") no-repeat  right;padding-right: 15px;}</style>
</head>
<body><a href="#"><span>首页</span></a><a href="#"><span>开发平台</span></a><a href="#"><span>北京尚学堂</span></a>
</body>
</html>

微信导航栏

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>微信导航栏(一)</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}body{background: url("img/wrap.jpg")  repeat-x;}.nav{height: 75px;}.nav li a{display: block;background: url("img/lTcb_ve.png")  no-repeat;padding-left: 15px;color: #fff;font-size: 14px;line-height: 33px;text-decoration: none;}.nav li a span{display: block;line-height: 33px;background: url("img/lTcb_ve.png") no-repeat right  center;padding-right: 15px;}.nav li a:hover{background-image: url("img/ao.png") ;}.nav li a:hover span{background-image: url("img/ao.png") ;}.nav li{float: left;margin: 0 10px;padding-top: 21px;}</style>
</head>
<body><div  class="nav"><ul><li><a href="#"><span>首页</span></a></li> <li><a href="#"><span>帮助与反馈</span></a></li> <li><a href="#"><span>公众平台</span></a></li> <li><a href="#"><span>开放平台</span></a></li> <li><a href="#"><span>微信支付</span></a></li> <li><a href="#"><span>微信网页版</span></a></li> <li><a href="#"><span>表情开发平台</span></a></li> <li><a href="#"><span>微信广告</span></a></li></ul></div>
</body>
</html>