文档章节

CSS:CSS 图像拼合技术

o
 osc_z1hvg4cu
发布于 2018/04/24 10:40
字数 999
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

ylbtech-CSS:CSS 图像拼合技术

 

1.返回顶部
1、

CSS 图像拼合技术


图像拼合

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

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

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


图像拼合 - 简单实例

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

navigation images

有了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 - 悬停效果

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

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

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

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

navigation images

因为这是一个单一的图像,而不是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
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

OSChina 周日乱弹 —— 那么长的绳子,你这是放风筝呢

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @ 巴拉迪维:黑豹乐队的单曲《无地自容》 耳畔突然响起旋律,是那首老歌。中国摇滚有了《一无所有》不再一无所有;中国摇滚有了《无地自容》不...

小小编辑
30分钟前
31
1
《吐血整理》-顶级程序员书单集

你知道的越多,你不知道的越多 给岁月以文明,而不是给文明以岁月 前言 王潇:格局决定了一个人的梦想,梦想反过来决定行为。 那格局是什么呢? 格局是你能够看见的深度、广度和密度。 王潇认...

敖丙
2019/12/11
8
0
我可以在Android版式中加下划线吗? - Can I underline text in an Android layout?

问题: 如何在Android布局xml文件中定义带下划线的文本? 解决方案: 参考一: https://stackoom.com/question/A31z/我可以在Android版式中加下划线吗 参考二: https://oldbug.net/q/A31z/...

法国红酒甜
33分钟前
18
0
干掉ELK | 使用Prometheus+Grafana搭建监控平台

什么是Prometheus? Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB)。Prometheus使用Go语言开发,是Google BorgMon监控系统的开源版本。 Prometheus的特点 · 多维度...

木九天
52分钟前
34
0
拉勾网拉你上勾

预览 需求简介 拉勾网是一个互联网行业的一个招聘网站,上面有许多职位,于是乎,小编想提取指定职位的基本信息(职位名,薪水,工作经验,工作地点,教育背景),然后插入 MongoDB 数据库,...

木下瞳
2019/04/17
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部