yj10864 发表于 2013-2-7 19:20:39

两张图片重叠 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]
查看完整版本: 两张图片重叠 CSS