Header 横幅只有 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。它用于确保横幅图像在不同 window 尺寸下保持其宽高比（稍后将详细介绍“英雄尺寸”）。

继续 css。首先是最外层的 hero-wrapper class:

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

这里没什么令人困惑的，主要是设置一些格式。请注意，width: 100% 使横幅扩展到 window.

的整个宽度

接下来是 hero class，它指定横幅图像及其显示方式：

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

这位英雄 class 指定图像，将其居中，并将其设置为其容器的全宽。

接下来是 hero-sizing class，它负责在调整横幅大小时保持横幅的纵横比：

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

要保持图片的纵横比，padding-top 必须与图片的 height:width 比例相匹配。由于本例中的图像为 1200 宽 x 400 高，我们将 padding-top 设置为 33%。 hero-sizing 有一个重要的功能 -- 它拉伸和缩小包含背景图像的 div 的高度，因此 div 的宽高比和图像的宽高比始终匹配。

仅通过上述 css，我们现在就有了一个全宽、响应式横幅图片，并保持其宽高比，但我们仍然希望能够向横幅添加一些文本并拥有它看起来不错。这就是 hero-content class 和 'hero-content:before 伪 class 的用途：

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

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

无论图像大小如何，我们的内容都应该放在图像上大致相同的位置。为实现这一点，我们采用了 :before 伪 class 的小技巧，将我们的内容向下推至横幅当前高度的 40%。这种定位 'trick' 意味着我们的内容的位置是响应式的，因为它会停留在图像上的同一位置。

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

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

我们完成了。

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

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

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

Header 横幅只有 css？

Header banner with css only?

javascript

jquery

html

css

banner