html - 如何在 Ionic / Vue.Js 中使用 CSS 解决此布局？

我目前正试图用 Ionic 和 CSS 解决这个布局：

这是我花了相当长一段时间后达到的结果：

我在主页上重新创建了基本设置：这里

布局由导航栏、全屏图像和下方的文本内容组成。渐变是使用 CSS 中的 ::after 属性构建的，因为我不想使用 Photoshop 等将渐变硬嵌入图像文件中。我必须使用“位置：绝对”属性构建全屏图像：

.happening-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
position:absolute; }

因为由于我不知道的原因，不使用“位置：绝对”会导致图像不会全屏显示，而是比总宽度小 2 或 3 个像素，因此在图像周围留下了背景颜色的细边框：

一旦我使用了“position:absolute”属性，我的布局就会变得一团糟，因为文本内容被放置在图像内容中。

这就是我努力想出一个将文本内容整齐地放置在全屏图像下方的解决方案的地方。据我了解，使用填充是不可能的，因为我需要布局独立于图像内容：

如果我根据纵向尺寸图像的高度使用填充，则在横向尺寸图像时内容会偏移太多，反之亦然。我可以尝试使用不同的 .css 类来定位横向和纵向图像，并设置和匹配填充，但是我确实觉得使用填充不是最好的解决方案。

有人可以在这里指出我的错误或强大的、与内容无关的解决方案，在保持布局的同时保持图像和文本内容整齐有序吗？

标签： htmlcssvue.jsionic-framework

根据您的示例，由于ion-content 标记中的padding属性，图像周围的边框正在发生，这里：

如果删除该填充，图像周围将没有空间。

顺便说一句，它position:absolute;成功了，因为它使图像脱离了页面流，因此，它充当了 body 的孩子，周围没有任何填充/边距。

已编辑

此外，您需要position:absolute从图像中删除并添加padding:0;到其上方的标签中，因为它在填充周围添加了一点空间。

据我了解，图像和文本将按照您的意愿运行。