两张图片重叠 CSS

有时我们要对已有的图片进行装饰，比如说加个标签或者打上促销标志等等。如果直接对图片处理，会比较麻烦。这里介绍一种使用CSS的超简单的办法。它是通过附加的<span>标签，实现图片的重叠效果。

原理：

把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。

CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对); 而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。

<style type="text/css">
	.grd {
		border:1px solid #CECECE; 
		padding:50px; 
		height:50px; 
		width:147px; 
		position:relative;
	}
	.grd span{
   background: url(/images/hot.gif) no-repeat;
   display: block;
   position: absolute;
   width: 35px;
   height: 58px;
   top: 5px;
   left:140px;
   border: 0px;
}
</style>

 

有了上面的CSS，HTML可以这样写：

<div class="grd">
  <span></span>
  <img src="/images/61dh.png" border="0"/>
</div>

 

评论

1 楼 channel321 2013-04-26  

其实用滤镜+z-index也可以实现哦。。就是浏览器支持不好。