<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px;left: -48px; }
.clipwrapper { position: relative; height: 48px; width: 48px; }
</style>
<title></title>
</head>
<body>
<div class="clipwrapper">
<img src="Images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
</div>
</body>
</html>
Monday, May 24, 2010
Using CSS with Inline Images
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px;left: -48px; }
.clipwrapper { position: relative; height: 48px; width: 48px; }
</style>
<title></title>
</head>
<body>
<div class="clipwrapper">
<img src="Images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
</div>
</body>
</html>
No comments:
Post a Comment