CSS如何将图片叠加到一起？
<body><divclass="div1"><imgsrc="1.png"/><imgsrc="1.png"/><imgsrc="1.png"/></div></bod...
<body>
<div class="div1">
<img src="1.png" />
<img src="1.png" />
<img src="1.png" />
</div>
</body>
比如这种结构，我要让div下面所有的图片都能叠加在一起，而且div是居中的，css应该怎么写 展开
<div class="div1">
<img src="1.png" />
<img src="1.png" />
<img src="1.png" />
</div>
</body>
比如这种结构，我要让div下面所有的图片都能叠加在一起，而且div是居中的，css应该怎么写 展开
3个回答
展开全部
1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以利用绝对定位实现你的需求:
给img的父级元素div设置css属性position：relative；
给img设置css属性position：absolute；利用left和top属性进行定位即可。
给img的父级元素div设置css属性position：relative；
给img设置css属性position：absolute；利用left和top属性进行定位即可。
追问
叠上去了，但是我这个div就没有再界面上占位了，导致后面的div覆盖到这些图片上了，还有就是图片也没有水平居中了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
DIV重叠 CSS让DIV层叠、叠加，CSS让两个DIV或多个DIV按顺序重叠叠加篇
让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。
重叠样式需要主要CSS样式解释：
1、z-index 重叠顺序属性；
2、position:relative和position:absolute设置对象属性为可定位（可重叠）；
3、left right top bottom绝对定位具体位置设置；
配合的样式：
1、css width；
2、css height；
3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别。
参考：http://www.divcss5.com/shili/s587.shtml
让DIV重叠并按想要顺序重叠需要CSS来实现，即CSS绝对定位进行实现。
重叠样式需要主要CSS样式解释：
1、z-index 重叠顺序属性；
2、position:relative和position:absolute设置对象属性为可定位（可重叠）；
3、left right top bottom绝对定位具体位置设置；
配合的样式：
1、css width；
2、css height；
3、background 为了观察效果，我们对不同DIV设置不同背景颜色进行区别。
参考：http://www.divcss5.com/shili/s587.shtml
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
