Question

在div里面加入图片后，如何在图片上加图片和文字？

在网页制作的过程中如何能做到下图的效果？

（图片2在图片1里面，底线是重合的；文字在图片2上，是居中显示的；这整个模块都是在同一个div里面的，用CSS要怎样做才能做到上面说的效果）

Answer 1

你把背景颜色换成背景图片就成了~

 

你说的一个DIV内是不可能的，因为大图片作为背景的话，小图片就得作为图片，但是文字是不能覆盖在图片上，只能覆盖在背景上的。。。

追问

忘记说了，我这个做的是自适应，背景设的宽度是100%，高度定不了，不然用margin-top就能解决问题了。。。现在我是把3个东西都放进同一个DIV了，但是第二幅图片和字都置顶了。。。在思考解决中。。。

追答

那你放进去的图片大小要一直改么？如果你的图片要一直改的话，建议你用JS的代码解决。。。
我也是把三个都放在一个大的DIV里面，你看我第二的DIV，是嵌套在第一里面的~当然第二的DIV也可以用table做的，那就满足你的一个DIV，但是这个例子中DIV包着TABLE的代码会比DIV包DIV来的长。。。
我代码上的宽度的设定是因为我用的是背景颜色。。。用百分百就啥的都看不到了。。。这些属性你自己改去，我就做个大概。。。
一直不能理解的是，既然你下面那个盖了上面的图片，干嘛不用PS组合成一张直接用？

追问

因为这是别人让我做的，他的意思是第一张图作为背景，第二张图是一块蒙板，然后在蒙板上接上后台能改那些文字。。。如果是ps那就简单很多了。。。

追答

CMS的话，你就得stl插件了，那个语言我不熟，你把文字的内容部分替换掉就好~蒙版的话我无能为力了。。。不然你试试JS，JS可以做出很多HTML做不出的效果~

Answer 2

设置图片1做背景，图片2用ul 设置一下离上面的间距， 图片二做背景图片，然后加上文字，

可以使用嵌套层，这是我的代码
页面部分的代码<div class="main">
<div class="t"></div>
<div class="b">
<li>您好您好您好您好您好您好您好您好</li></div>
</div>
css的代码.main{background:url(图片1地址) no-repeat; width:300px; height:200px;}
.main .t{height:80%}
.main .b{background:url(图片2地址) no-repeat bottom; width:100%; height:20%;}
.main .b li{ height:40px;line-height:40px;;text-align:center; list-style:none;}
你如果要图片1的宽度改成自适应，就设置宽度

width:100%；就可以了，至于文字，你就使用设定高度居中吧，
网速不给力，上传不了图片，哈哈

Answer 3

看你标题的意思是，图片2是在图片一上吗？
1.<p>文字</p>让文字跟图片2的大小一样，给p一个text-align:center;
2.给外面的DIV加个相对定位，再让图片2绝对定位到图片1上，bottom为0，z-index为9998，再给p绝对定位，bottom也为0，z-index为9999

Answer 4

图片1作为背景图片写到div里（用样式），文字和图片2写到html结构里。