顶部带有 <div> 的响应式英雄 BG 图片

Question

我正在尝试创建一个响应式、整页宽度的英雄 img/banner，顶部有一些文本。

因为我想要 img/banner 之上的 div，包含一些文本，所以我选择使用 CSS background-image 属性（而不是 HTML <img> 元素）用于图像（我尽可能避免使用 position: absolute）。

经过一番折腾，我似乎找到了一个很好的解决方案，可以让 background-image 属性的行为就像 HTML <img> 元素一样（这正是我希望 img 在调整大小时的行为方式）...

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.bg-img {
  background-image: url('https://www.bbva.com/wp-content/uploads/2016/12/Carl-Sagan-BBVA-1920x0-c-f.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: 40.57%;
  /* (img-height / img-width * width) */
  /* (779 / 1920 * 100) */
}

...然而，这个'roundabout'解决方案让图像表现出来，调用填充来增加bg-image 容器的高度，它迫使包含我的文本内容的 <div> 离开图像并进一步向下移动 :(

有没有什么方法可以解决这个问题而不用在文本上使用绝对定位 div 让它位于 bg-img 之上？

我把所有的东西都放进了一支笔里，这样玩起来更容易： https://codepen.io/Hacktinium/pen/VwWRBdg

提前致谢

Answer 1

不确定是否 100% 理解您想要的结果，如果您希望文本位于图像顶部而不使用 <img> 标签，为什么不将内容和图像放在里面包装器但在不同的 div 中？

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

顶部带有 <div> 的响应式英雄 BG 图片

Responsive hero BG image with <div> on top

html

css

image

responsive

hero