如何用HTML 、CSS在大图片上放置另一张小图片？拜托了!
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用HTML 、CSS在大图片上放置另一张小图片？拜托了!相关的知识，希望对你有一定的参考价值。
要满足
1：两张图片可以都填加超链接.
2：鼠标放在图片可以显示完整图片星系.
拜托了!
<div id="ss"><a href="#">小图片</a><div>
#big 。。。。
#ss
position:absolute;
left:100px;
top:150px;
根据实际设定。。。
我把小图片绝对定位，该补补position课程。
参考资料：position:absolute; left:100px; top:150px;
参考技术A 你把两张图片放在一起就可以了， 然后调整一下排列顺序如何用CSS把一个图片放在另一个图片的右（左）下角？形如百度贴吧会员头像上横批！
比如百度贴吧会员头像的右下角 或者 左下角 会有一个小图片，上面有文字“认证会员”、“举世无双”等，我也想实现类似效果，请问如何在一个图片右（左）下角叠加一个小图片？最好这个小图片是背景，上面的文字可以修改。
具体案例，你可以随便打开百度贴吧的一个帖子，看看会员头像就明白我的意思了。
求详细代码，万分感激！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
第一种实现方法：图片作为背景
<div style="width:110px; height:110px; background-image:url(http://tb.himg.baidu.com/sys/portrait/item/b5ceb7e7d6d0b5c4bcc5c4af5f8909); position:relative">
<div style="width:83px; height:20px;background-image:url(http://tieba.baidu.com/tb/static-money/mall/mall_5.gif); position:absolute; bottom:0">
</div>
</div>
第二种实现方法：div使用绝对定位，图片作为div里的对象
<div style="width:110px; height:110px; position:absolute; top:180px; left:0;">
<img src="http://tb.himg.baidu.com/sys/portrait/item/b5ceb7e7d6d0b5c4bcc5c4af5f8909"/>
<div style=" position:absolute; left:0; bottom:0">
<img src="http://tieba.baidu.com/tb/static-money/mall/mall_5.gif" />
</div>
</div>
</body>
</html>
两种方法都可以，也可以自己再组合。
演示的图片是直接使用百度贴吧里的图片的，楼主可以换成自己的图片。
代码直接贴过去运行就可以了。 参考技术A 你可以用两个div在上面的div的属性上加上z-index:后面跟数值，数值越大表示越考上！对于两个div的定位就是你自己的事了 参考技术B 那个是以前百度贴吧商场里面的会员勋章 现在已经下架了 预计国庆节才重新开放 但是以前买的依旧保存 并不是什么代码之类的东西
以上是关于如何用HTML 、CSS在大图片上放置另一张小图片？拜托了!的主要内容，如果未能解决你的问题，请参考以下文章