webruaryのデモページ

CSSで画像の上に背景画像を乗っける方法

サンプル↓

html
<ul class="demo07">
<li><a href="#"><img src="画像" width="125" height="125" /></a></li>
<li><a href="#"><img src="画像" width="125" height="125" /></a></li>
</ul>
css
ul.demo07{
  list-style:none;
  padding:0;
  margin:0;
}

ul.demo07 li{
  position:relative;
  z-index:1;
  width:155px;
  height:155px;
  margin-bottom:15px;
}

ul.demo07 li a{
  display:block;
  width:155px;
  height:155px;
  background:url('背景画像のURL') 0 0 no-repeat;
}

ul.demo07 li a img{
  display:block;
  position:absolute;
  z-index:-1;
  top:15px;
  left:15px;
}