创建简单有用的CSS Sprites

最新推荐文章于 2024-06-04 09:56:16 发布

ayangjing

最新推荐文章于 2024-06-04 09:56:16 发布

阅读量398

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/ayangjing/article/details/12996125

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css sprite</title>
<style type="text/css">
.sprite {background:url(mySprite.png);}
 
.monster {height:128px;}
.application {height:61px;}
 
/* Monsters */
.doctor {width:103px; background-position:-2px -2px;}
.octopus {width:89px; background-position:-106px -2px;}
.wolf {width:115px; background-position:-196px -2px;}
.star {width:126px; background-position:-312px -2px;}
.dog {width:128px; background-position:-439px -2px;}
 
/* Applications -*/
.css {width:61px; background-position:-2px -133px;}
.activityMonitor {width:58px; background-position:-64px -133px;}
.dashboard {width:51px; background-position:-123px -133px;}
.quicktime {width:53px; background-position:-175px -133px;}
.scanner {width:74px; background-position:-229px -133px;}
</style>

</head>
<body>
<div class="sprite monster doctor"></div>
<div class="sprite monster octopus"></div>
<div class="sprite monster wolf"></div>
<div class="sprite monster star"></div>
<div class="sprite monster dog"></div>
<div class="sprite application css"></div>
<div class="sprite application activityMonitor"></div>
<div class="sprite application dashboard"></div>
<div class="sprite application quicktime"></div>
<div class="sprite application scanner"></div>
</body>

</html>

ayangjing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
创建简单有用的CSS Sprites

css sprite.sprite {background:url(mySprite.png);} .monster {height:128px;}.application {height:61px;} /* Monsters */.doctor {width:103px; background-position:-2px -2px;}.octopus {width:89px;
复制链接

扫一扫

专栏目录