首页 > css教程 > 正文

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

原创 2018-09-14 17:45:10 0 45
本章给大家介绍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 class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像

  • 宽度:46px;高度:44px; - 定义我们使用的那部分图像

  • background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置(左0px,顶部0px)

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

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

我们想使用拼合图像 ("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;}

实例解析:

  • #navlist{position:relative;} - 位置设置相对定位,让里面的绝对定位

  • #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0,列表样式被删除,所有列表项是绝对定位

  • #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px

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

  • #home{left:0px;width:46px;} - 定位到最左边的方式,以及图像的宽度是46px

  • #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置(左0px,顶部0px)

  • #prev{left:63px;width:43px;} - 右侧定位63px(#home宽46px+项目之间的一些多余的空间),宽度为43px。

  • #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px(#home宽46px+分隔线的1px)

  • #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.

  • #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px(#home 46px+1px的分割线+#prev宽43px+1px的分隔线)

四、图像拼合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;}

实例解析:

  • 由于该列表项包含一个链接,我们可以使用:hover伪类

  • #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,只是每个再向下45px

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

  • 相关标签:图像拼合技术 css
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享_javascript技巧
  • 《CSS3实战》笔记--渐变设计(一)_经验交流
  • CSS3中Transition属性详解以及示例分享_CSS/HTML
  • 关于CSS的图像拼合技术
  • Css Sprite如何实现图像拼合技术
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • html/css快速入门 html/css快速入门
  • HTML/CSS  5小时基础入门教程 HTML/CSS 5小时基础入门教程
  • CSS3从入门到精通教程 CSS3从入门到精通教程
  • CSS3最新基础教程详解 CSS3最新基础教程详解
  • CSS 0基础入门教程 CSS 0基础入门教程
  • 相关视频章节