仅带有 css 的标题横幅？

Question

我是 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：

.main-header img {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.title {
    position: relative;
    top: -450px;
    left: 10%;
    text-align: center;
    display: inline-block;
    color: white;
    margin:  0 auto;
    width: 80%;
    text-transform: uppercase;
}

.title h1 {
    font-size: 2.7rem;
    font-weight: 700;
    margin:  0 auto;
    width: 80%;
    margin-bottom: 1.5%;
}

.title p {
    font-size: .60rem;
    width: 33%;
    margin:  0 auto;
    line-height: 1.8;  
}

是否甚至可以仅使用 css 创建英雄横幅？因为我看不到任何教程..

Answer 1

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

这是一个非常简单的全宽响应式英雄横幅示例，其中包含图像和文本，仅使用 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>

唯一不寻常的元素是“英雄大小” div。它可以确保横幅图像在不同的窗口大小下保持其纵横比（稍后将详细介绍“英雄大小”）。

在 CSS 上。首先是最外层的hero-wrapper类：

.hero-wrapper {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
  font: 18px helvetica, sans-serif;
  color: white;
}

这里没有什么太令人困惑的地方，主要是设置一些格式。请注意，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-sizing 类，它负责在调整横幅大小时保持横幅的纵横比：

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

要保持图像的纵横比，padding-top 必须与图像的高宽比匹配。由于此示例中的图像是 1200 宽 x 400 高，我们将 padding-top 设置为 33%。 hero-sizing 有一个重要的功能——它拉伸和收缩包含背景图像的 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 查询的小屏幕（例如减小字体大小）可以进行改进，但这个示例展示了如何实现两个非常有用的功能：

1. 保持纵横比的全宽响应式英雄横幅图片
2. 图像上的一致内容定位

.hero-wrapper {
  clear: both;
  position: relative;
  width: 100%;
  text-align: center;
  font: 18px helvetica, sans-serif;
  color: white;
}

.hero {
  background-image: url(https://picsum.photos/id/1062/1200/400);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;
  background-size: 100% auto;
}

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

.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;
}

body {
  margin: 0;
  background-color: #d0d0d0;
}

<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>