Html 将图像添加到可调高度部分的底部

我正在尝试在我的web应用程序上创建CSS设计。我要的是一面在风中飘扬的旗帜。我希望横幅展开/滚动其高度，以便所有文本都将显示在横幅上，但无论横幅有多高，我希望在横幅底部添加横幅的撕裂部分。在所有情况下，横幅的宽度都相同

类似下面的示例（请原谅可怕的绘制屏幕截图）：

---

我似乎不知道该怎么做。你们这些聪明人有什么想法吗？

给容器元素“position:relative”（创建新的定位上下文）和一些底部填充（为图像留出空间）。然后，您可以将背景图像设置为位于容器底部且不垂直重复，也可以将图像绝对定位到容器底部。

首先，我认为如果您能提供一个到目前为止的示例，这将非常有用。例如，如果底部没有图像，可调高度div的HTML和CSS是什么？更容易加上去

我认为最好的方法是在可调整元素的底部添加一个图像元素（假设它是

）。将其定位为绝对，并相对于其父容器的底部进行设置。你可能得稍微摆弄一下才能使它发挥作用。不要忘记将父对象的位置也设置为相对

如果您想看到有史以来最糟糕的例子，请点击这里：

---

很好地进一步阅读了位置：

您可以使用伪元素进行此操作。这样，您就不需要为每个元素添加额外的标记

.myDiv {
  position: relative;
}

.myDiv::after {
  content: url(image.jpg);
  display: block;
  position: absolute;
  left: 0;
  top: 100%; /* will be placed immediately where the div ends */
  width: 100%;
}

根据“横幅卷曲”的高度，在.myDiv上设置边距底部

或者直接，无绝对，只要没有衬垫：

.myDiv::after {
  content: url(image.jpg);
  display: block;
  width: 100%;
}

---

谢谢你的例子。这正是我需要看到的，以便理解如何完成这样的事情。