18910140161

<div>在顶部堆栈溢出时具有HTML响应的英雄BG图像

顺晟科技

2022-10-19 12:53:36

175

我正在尝试创建一个响应迅速、全页宽度的英雄IMG/Banner,在顶部添加一些文本。

因为我希望在img/banner上有一个包含一些文本的div,所以我选择使用CSS属性(而不是HTML元素)来显示图像(如果可能的话,我尽量避免使用)。

经过一番折腾,我似乎找到了一个很好的解决方案,使属性的行为像HTML元素一样(这正是我希望img在调整大小时的行为)...

...然而,这个

有什么方法可以解决这个问题,而不使用文本div上的绝对定位来使它位于bg-img的顶部吗?

我把所有东西都放进笔里,让它更容易玩: https://codepen.io/hacktinium/pen/vwwrbdg

提前感谢


顺晟科技:

不确定是否100%理解了您想要的结果,如果您希望文本位于图像的顶部而不使用标记,为什么不将内容和图像放在包装器中,而是放在不同的div中?

我创建了这支笔作为示例: https://codepen.io/mvuljevas-the-selector/pen/zyzbjgo

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航