# 如何添加并自定义标题图像

**URL:** https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242
**Category:** Support
**Created:** [2019年七月6日 22:03 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242 "2019-07-06T22:03:03Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![calebs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/calebs/32/148838_2.png) [@calebs](https://meta.discourse.org/u/calebs)
#### Post date: [2019年七月6日 22:03 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/1 "2019-07-06T22:03:03Z")

</div>

我最近发现了一个 [论坛](https://forums.woot.com)，它的头部图片用得非常好。不确定他们使用的是什么主题，但有人能指点一下如何用 CSS 创建类似的效果吗？

 ![Woot](https://global.discourse-cdn.com/meta/original/3X/e/a/ea0f0a830f53145c3e016488a8d6b16f9fbea865.png)

---

<div class="post-metadata">

### Author: ![aatishrkamble](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aatishrkamble/32/140103_2.png) [@aatishrkamble](https://meta.discourse.org/u/aatishrkamble)
#### Post date: [2019年七月7日 08:23 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/2 "2019-07-07T08:23:34Z")

</div>

有一个名为 [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133) 的主题组件，它允许您添加横幅图片，以及许多其他酷炫的功能，如行动号召按钮和链接。

---

<div class="post-metadata">

### Author: ![calebs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/calebs/32/148838_2.png) [@calebs](https://meta.discourse.org/u/calebs)
#### Post date: [2019年七月7日 10:57 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/3 "2019-07-07T10:57:01Z")

</div>

谢谢，但这个模板看起来像是 90 年代末的风格。我只需要放一张头图，不需要这些文字和按钮。

---

<div class="post-metadata">

### Author: ![aatishrkamble](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aatishrkamble/32/140103_2.png) [@aatishrkamble](https://meta.discourse.org/u/aatishrkamble)
#### Post date: [2019年七月7日 12:36 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/4 "2019-07-07T12:36:38Z")

</div>

> [@calebs](#):
>
> 我只需要添加一个头部图片，不需要这些文字和按钮。

你可以移除所有文字和按钮，只保留头部图片。这都在组件设置中。

---

<div class="post-metadata">

### Author: ![calebs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/calebs/32/148838_2.png) [@calebs](https://meta.discourse.org/u/calebs)
#### Post date: [2019年七月7日 12:59 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/5 "2019-07-07T12:59:46Z")

</div>

移除所有文字后，图片会变得非常小，几乎看不见。

---

<div class="post-metadata">

### Author: ![aatishrkamble](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aatishrkamble/32/140103_2.png) [@aatishrkamble](https://meta.discourse.org/u/aatishrkamble)
#### Post date: [2019年七月7日 13:31 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/6 "2019-07-07T13:31:51Z")

</div>

将此代码添加到您的主题模板中：

```
.banner-box .section-header {
    margin-top: 50px;
}

```

根据您的需要修改 px 值。

---

<div class="post-metadata">

### Author: ![calebs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/calebs/32/148838_2.png) [@calebs](https://meta.discourse.org/u/calebs)
#### Post date: [2019年七月7日 13:36 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/7 "2019-07-07T13:36:11Z")

</div>

谢谢！这很有帮助！

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2019年八月6日 13:36 UTC](https://meta.discourse.org/t/how-to-add-a-header-image-and-customize-it/122242/8 "2019-08-06T13:36:15Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.