- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：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 选择器用于鼠标悬停在元素上的显示的效果
效果图：
推荐手册