Javascript 标题横幅仅使用css？

我是css的初学者，我正在尝试只使用css创建一个英雄横幅，并使其具有响应性，我对图像顶部文本的位置感到非常困惑，如果我缩放页面或调整其大小，文本不会响应

<header class="main-header">            
        <img src="imgs/header.jpg"/>
        <div class="title">
        <h1>This is a title</h1>
        <p>some texts here</p>
        </div>
</header>

---

甚至可以只使用css创建英雄横幅吗？因为我看不到这方面的任何教程。

示例：带有图像和文本的响应英雄横幅

这里是一个全幅、响应性强的英雄横幅的最小示例，其中包含图像和文本，仅使用css

HTML：

<div class="hero-wrapper">
  <header class="hero">
    <div class="hero-sizing"></div>
    <div class="hero-content">
      <h1>Hero Title</h1>
      <p>Hero paragraph text.</p>
    </div>
  </header>
</div>

这里没有什么太混乱的，主要是设置一些格式。请注意，

width:100%

使横幅延伸窗口的整个宽度

接下来是

hero

类，它指定横幅图像及其显示方式：

.hero {
  background-image: url(http://lorempixel.com/image_output/people-q-c-1200-400-6.jpg);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: 100% auto;
}

此hero类指定图像，使其居中，并将其设置为容器的全宽

接下来是负责在调整横幅大小时保持横幅纵横比的

英雄大小调整类：

.hero-sizing {
  padding-top: 33%;
}

要保持图像的纵横比，
padding top
必须与图像的高宽比匹配。由于本例中的图像是1200宽400高，我们将padding top设置为33%
hero Size
提供了一个重要的功能——它拉伸和收缩包含背景图像的div的高度，因此div的纵横比和图像的纵横比始终匹配

有了上面的css，我们现在有了一个全宽、响应性强的横幅图像，可以保持其纵横比，但我们仍然希望能够在横幅上添加一些文本，让它看起来更像样。这就是
hero content
类和“
hero content:before
伪类”的作用：

.hero-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-content:before {
  content: ' ';
  display: block;
  height: 40%;
}

我们的内容应该放置在图像上大致相同的位置，而不管图像的大小。为了实现这一点，我们使用了
：before
伪类的一个小技巧，将我们的内容按横幅当前高度的40%向下推。这种定位“技巧”意味着我们的内容的位置是响应性的，因为它将停留在图像的同一位置

最终的css只是设置一些格式首选项：

.hero-content h1,
.hero-content p {
  margin-top: 0px;
  margin-bottom: 6px;
}

我们完成了

诚然，这只是一个简单的示例，对于带有
@media
查询的小屏幕（如减小字体大小），可以对其进行改进，但此示例展示了如何实现两个非常有用的功能：

全宽、反应灵敏的英雄横幅图像，保持纵横比
图像上一致的内容定位

.hero包装器{
明确：两者皆有；
位置：相对位置；
宽度：100%；
文本对齐：居中；
字体：18px helvetica，无衬线；
颜色：白色；
}
.英雄{
背景图片：url(https://picsum.photos/id/1062/1200/400);
背景重复：无重复；
背景附件：滚动条；
背景位置：中心；
背景尺寸：100%自动；
}
.英雄尺码{
垫顶：33%；
}
.英雄内容{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
}
.英雄内容：之前{
内容：''；
显示：块；
身高：40%；
}
.英雄内容h1，
.英雄内容{
边际上限：0px；
边缘底部：6px；
}
身体{
保证金：0；
背景色：#D0；
}

英雄头衔
英雄段落文本

你能把它和你的图像放在一起吗？背景图像使用的常见模式是将图像分配给包装容器的袋子。在你的例子中是主标题。然后文本将位于背景图像的前面，即使没有绝对定位。当我把它作为背景图像时，它不会出现。我不完全理解你想要实现什么。是图像不起作用吗？没有的文本？二者都如果你能提供一个目标结果是什么的示例，那么就更容易了，只要现在就演示一下它的外观（检查如何创建一个）。顶部的图像不起作用。。。如果我放大或缩小浏览器的大小，它们就会消失image@shean如果您仍在寻找纯css响应英雄横幅的示例，那么在codepen.io上有一个示例。它们使用css预处理器，我还不太了解。@shean所以您似乎在寻找使用纯css的响应英雄横幅。我会在上面的答案中一步一步地告诉你。@shean好的，看我修改过的答案。这是一个简单的例子，展示了如何使图像和内容定位具有响应性。@shean你看到我修改过的答案了吗？它显示了如何使英雄横幅图像和文本定位响应。如果你有任何问题，请提问。
.hero-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.hero-content:before {
  content: ' ';
  display: block;
  height: 40%;
}

.hero-content h1,
.hero-content p {
  margin-top: 0px;
  margin-bottom: 6px;
}