web前端－CSS 图像拼合技术－028

最新推荐文章于 2022-10-10 11:05:38 发布

洲洋世界

最新推荐文章于 2022-10-10 11:05:38 发布

阅读量2.3k

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/helloMr_wo/article/details/52787944

版权

图像拼合

图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。

图像拼合 - 简单实例

与其使用三个独立的图像，不如我们使用这种单个图像（”img_navsprites.gif”）：
这里写图片描述
有了CSS，我们可以只显示我们需要的图像的一部分。
在下面的例子CSS指定显示 “img_navsprites.gif” 的图像的一部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>www.baidu.com</title>  
<style>
img.home {
    width: 46px;
    height: 44px;
    background: url(/images/img_navsprites.gif) 0 0;
}

img.next {
    width: 43px;
    height: 44px;
    background: url(/images/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img class="home" src="/images/img_trans.gif"><br><br>
<img class="next" src="/images/img_trans.gif">

</body>
</html>

运行结果：
这里写图片描述
实例解析：

<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果。

图像拼合 - 创建一个导航列表

我们想使用拼合图

最低0.47元/天解锁文章

洲洋世界

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
web前端－CSS 图像拼合技术－028

图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使用图像拼合会降低服务器的请求数量，并节省带宽。图像拼合 - 简单实例与其使用三个独立的图像，不如我们使用这种单个图像（”img_navsprites.gif”）：有了CSS，我们可以只显示我们需要的图像的一部分。在下面的例子CSS指定显示 “img_navsprites.gif”
复制链接

扫一扫