购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 图像拼合技术(Image stitching technique)

CSS 图像拼合技术(Image stitching technique)
图像拼合就是单个图像的集合。拥有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求,但使用图像拼合就可以降低服务器的请求数量,并节省带宽。
编辑:前端控 前端控 更新时间:2019-03-25 10:58:03

CSS 图像拼合技术

图像拼合

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

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

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

实例

.bird{
    width: 64px;
    height: 64px;
    background:url(images/鸟.png);
}
.ye{
	width:48px;
	height: 48px;
	background:url("images/叶子.png");
}
</style>
</head>
<body>
<img class="bird" src="images/bird-bg.png"><br><br>
<img class="ye" src="images/ye-bg.png">

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

代码解析:<img>属性中因为不能为空,所以通过src属性定义了一个透明图像。在页面中显示的图像是我们在CSS中指定的背景图像,如果不重合,可通过定义背景图像的位置。这是使用图像拼合最简单的方法

创建一个导航列表

我们想使用拼合图像,以创建一个导航列表。

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

实例

#box{position:relative;}
#box li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#box li, #box a{height:44px;display:block;}
#ye1{
left:0px;width:46px;
background:url('images/叶子.png') 2px 0;
}
#ye2{
left:63px;width:43px;
background:url('images/叶子.png') -4px 0;
}
</style>
</head>
<body>
<ul id="box">
  <li id="ye1"><a href="http://a.python2.com"></a></li>
  <li id="ye2"><a href="http://a.python2.com"></a></li>
</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

图像拼合:悬停效果

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

实例

#ye1:hover{
background:url("images/叶子.png");
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 37.jpg

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号