画像を切ってもOKな画像置換

css

http://neal.venditto.org/articles/12/bir

<html>
<head>
<style>
body {
  position: relative;
  z-index: 1;
} 
h1 {
  background: transparent url( image.jpg ) top left no-repeat;
  height: 40px;
  width: 400px;
} 
h1 span {
  position: relative;
  z-index: -1;
}
</style>
</head>
<body>
<h1><span>header</span></h1>
</body>
</html>
  • メニュー
<html>
<head>
<style>
body {
  position: relative;
  z-index: 1;
} 
ul.menu li {
  display: inline;
} 
ul.menu li a {
  display: block;
  float: left;
  height: 20px;
  width: 200px;
  background: transparent url('image.jpg') top left no-repeat;
  text-decoration: none;
}
ul.menu li a:hover {
  background: transparent url('image.jpg') 0 -20px no-repeat;
}
ul.menu li span {
  position: relative;
  z-index: -1;
}
</style>
</head>
<body>
<ul class="menu">
  <li><a href="" ><span >Text</span></a></li>
  <li><a href="" ><span >Text</span></a></li>
  <li><a href="" ><span >Text</span></a></li>
</ul>
</body>
</html>


動作確認
firefox2, 3
safari3
opera9
win-ie5.01, 5.5, 6, 7
mac-ie5.2