- base::background
梗概
- 对一个元素设置背景图片,并从指定位置开始显示一段距离
适用范围
场景
- 处理精灵图
实例
我们使用这种单个图像(“img_navsprites.gif”):
有了CSS,我们可以只显示我们需要的图像的一部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img.home {
/* 设置该元素大小,超出元素大小的背景图将不会在屏幕中显示 */
width: 46px;
height: 44px;
/* 从left:0和top:0处开始显示 */
background: url(/images/img_navsprites.gif) 0 0;
}
img.next {
width: 43px;
height: 44px;
background: url(/images/img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>
<img class="home" src="/images/img_trans.gif"><br><br>
<img class="next" src="/images/img_trans.gif">
</body>
</html>效果
