主图像

---

了解如何使用 CSS 创建主图。

---

主图是带有文字的大图片，通常放置在网页顶部:

亲自试一试 »

---

如何创建主图

步骤 1) 添加 HTML:

实例

<div class="hero-image">
  <div class="hero-text">
    <h1>I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

---

步骤 2) 添加 CSS:

实例

body, html {
    height: 100%;
}

/* 主图 */
.hero-image {
  /* 使用 "linear-gradient" 为图像（photographer.jpg）添加变暗背景效果。 这将使文本更易于阅读 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");

  /* 设置特定高度 */
  height: 50%;

  /* 定位和居中图像以在所有屏幕上很好地缩放 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* 在图片中间放置文字 */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
} 亲自试一试 »