争怎路由网/网站教程/内容

CSS如何使用图像拼合技术?

网站教程2024-02-29 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本章给大家介绍CSS如何使用图像拼合技术?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、图像拼合

图像拼合就是单个图像的集合。

有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。

使用图像拼合会降低服务器的请求数量,并节省带宽。

二、图像拼合 - 简单实例

与其使用三个独立的图像,不如我们使用这种单个图像("img_navsprites.gif"):

1.gif

有了CSS,我们可以只显示我们需要的图像的一部分。

在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分:

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析:

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

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

我们想使用拼合图像 ("img_navsprites.gif"),以创建一个导航列表。

我们将使用一个HTML列表,因为它可以链接,同时还支持背景图像:

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

实例解析:

现在开始每个具体部分的定位和样式:

四、图像拼合s - 悬停效果

现在,我们希望我们的导航列表中添加一个悬停效果。

:hover 选择器用于鼠标悬停在元素上的显示的效果

提示: :hover 选择器可以运用于所有元素。

我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像:

2.gif

因为这是一个单一的图像,而不是6个单独的图像文件,当用户停留在图像上不会有延迟加载。

我们添加悬停效果只添加三行代码:

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

实例解析:

以上就是CSS如何使用图像拼合技术?的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:CSS如何运用图像拼合技术?
    相关阅读