Css 如何在下图所示的图像下方放置一个轮廓矩形

也许我的问题相当简单，对此我深表歉意，但很快就从html和css开始了，我仍然没有太多的实践。 我想知道如何在图像（jpeg或css）下方放置矩形，如下图所示：

---

这是一个非常基本的示例，介绍如何使用css在图像下方添加矩形。 检查代码段

div{
位置：绝对位置；
宽度：350px；
高度：230像素；
边框：2倍纯色灰色；
顶部：30px；
左：30px；
z指数：-10；
}
img{
宽度：350px；
}

---

将

img

包装在

div

中，并在

div

中添加

psuedoelement

使用

伪元素

意味着您不需要声明

img

容器的高度和宽度

div{
位置：相对位置；
显示：内联块；
}
img{
垂直对齐：底部对齐；
}
部门：之后{
内容：''；
位置：绝对位置；
左：3rem；
顶部：3rem；
边框：2件纯黑；
宽度：100%；
身高：100%；
z指数：-1；
}

---

一种方法是使用单独的

div

作为边框：设置

位置：绝对

到图像和边框的div，并使用

z-index

将图像放在边框div的顶部

必须使用容器div来包含图像和边框div。此容器获取子元素的

位置：相对

（以设置子元素的

位置：绝对

），并且需要具有整个子元素簇的维度

.container{
位置：相对位置；
宽度：240px；
高度：120px；
}
.货柜组{
宽度：200px；
高度：100px；
}
.形象{
z指数：20；
位置：绝对位置；
顶部：0px；
背景颜色：浅蓝色；
}
.直肠{
z指数：10；
位置：绝对位置；
顶部：20px；
左：40px；
边框：1px实心#666；
}

文本

正文

形象
正文

Text

您可以从CSS文件中绘制SVG格式的矩形，或者使用带有边框的div。您还需要使用Z索引和绝对位置在图片下方绘制矩形，以使div和/或svg图形相互重叠。这个答案比我的答案好。@DragonBorn不一定，这只是一种方法。OPs布局可能有利于您的方法我刚刚尝试了这个解决方案，如果不提供容器div的宽度和高度，它将无法工作。文本将显示在边框中，因为容器只有图像的大小，而不考虑伪元素。@MichaelScheffenacker By container，我的意思是一个包含图像的div，没有其他内容。@sol我认为这个解决方案非常好。但我建议将大小添加到包含的div中，以防止文本（或以下其他元素）进入边框。我不明白，既然已经有更好的解决方案，为什么还要发布此答案。在这里使用

pseudoelement

是正确的方法。这仅仅是因为我在发布任何答案之前就开始写这个答案。这很公平——从好的一面看，它提供了另一种方法，如果他也想在框中添加更多内容，那么可以使用以下方法：）我刚刚发现，“更好的解决方案”如果未在容器分区中提供高度和宽度，则无法工作。