css怎么把两个图片叠加在一起啊？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么把两个图片叠加在一起啊？相关的知识，希望对你有一定的参考价值。
如图，麻烦说详细点。
比如
background: url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat;
就同时指定了两个图片，两个图片的位置可以通过后面的 位置参数调整。
如果是img元素，可以通过给img指定绝对定位的样式，通过绝对定位让两个img按照
要求的方式重叠。
比如：
img#id1 position:absolute; top:0; left:0; width:100%; display:block;
mg#id2 position:absolute; top:20px; left:0; width:100%; display:block;
试试就知道了。如果要使用绝对定位，img的父元素的样式需要加上 position:relative;
如何用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 那个是以前百度贴吧商场里面的会员勋章 现在已经下架了 预计国庆节才重新开放 但是以前买的依旧保存 并不是什么代码之类的东西
以上是关于css怎么把两个图片叠加在一起啊？的主要内容，如果未能解决你的问题，请参考以下文章
在ArcGIS中，怎么把JPG格式的图片和SHPFILE进行叠加啊？