如何通过css让一张图片叠加在另一张图片上
如何通过css让一张图片叠加在另一张图片上,是许多网页设计师经常用到的,下面织晶网络技术部可以介绍两种常用的办法:
1. 通过css样式把底部图片做为背景,调用background-image (背景图片)样式, 再用html标签写出叠在上面的图片代码等,图片就会叠在在背景图片上。这样编写的上部图片可以灵活调用,而底部的背景图片只能通过修改css样式来替换,相对维护起来比较困难。
2. 一张图片在底层,另一张图片在上层,注意的要点是,两张图片在同一个div容器下,下部的图片必须有style="position: relative; top:0px; left:0px; "/>样式, 上部的图片必须有style=" position:absolute; top:0px; left:0px; "/>样式,这种方式方法后期维护起来相对容易一些
代码如下(仅供参考):
<。。。div id="wpic" style="position: relative; float:left; width:300px; height:330px; margin:0px; padding:0px; ">
<。。。img src="images/照片1.jpg" data-ke-src="images/照片1.jpg" style=" position:absolute; top:0px; left:0px; width:100px; height:120px;"/>
<。。。img src="images/照片2.jpg" data-ke-src="images/照片2.jpg" style=" width:300px; height:330px;"/>
<。。。/div>
【注:把代码里面所有的 。。。 删除掉,防止显示不了】