我正在设置我的网站，并尝试在顶部标题区域添加一张图片。
‘设置 > 品牌’中的说明写道：
使用宽矩形图片，高度为 120 像素，宽高比大于 3:1
因此，我使用了一张尺寸为 120px x 2000px 的 PNG 图片，原本期望它会自动靠左对齐并完全填充标题容器，但结果并非如此！我哪里做错了？
2 个赞
从您的截图来看，图片似乎已正确设置在左侧。Discourse 标题栏显示在一个宽度受限的 wrap div 内。这就是徽标没有完全靠左显示的原因。
说明中要求您上传一张高度为 120px 的图片，但当该图片在 Discourse 上显示时，其高度会缩小至约 31px。这意味着您上传的图片宽度在显示时会被除以 4。从您的截图来看，徽标的宽度大约为 660px，因此我认为它的显示是正确的。
如果您有较窄的徽标可用，不妨尝试一下，看看效果如何。
2 个赞
谢谢 Simon，我希望标志能完全填满页眉，这可行吗？即使减小了图片宽度，它仍然被限制在 31 像素的高度，看起来效果不佳。
理论上可以填满大部分页眉，但可能需要反复尝试才能达到理想效果。您可能需要调整网站的 CSS 来实现这一点。如果您对此感兴趣，请查看Discourse 主题使用入门指南和Discourse 主题开发者指南。
查看我们关于 logo 设置的说明，我认为我们应该提供一个最佳宽高比。您截图中的徽标宽高比确实大于 3:1，但在我看来它太宽了。如果您查看 Discourse Meta 论坛使用的徽标，会发现其显示尺寸约为 150 x 40 像素。这在我看来是理想的宽高比——略小于 4:1。
要实现您的效果，您可能需要使用一些 CSS。
示例：
.d-header .contents {
background: linear-gradient(to bottom, rgba(36,66,183,0) 0%,rgba(36,66,183,1) 40%,rgba(36,66,183,1) 60%,rgba(36,66,183,0) 100%);
}
2 个赞
我觉得你误解了我的目标。问题不在于效果，而是要用图片填充标题框，而该框目前高度被限制为 31 像素。
你能在这里链接你的图片吗？
1 个赞
我理解你的问题了。不过，如果实现你想要的效果需要一张带渐变的图片很困难，为什么不上传不带渐变的标志，然后通过 CSS 添加渐变呢？我觉得这样更简单直接。
但也许你最终想要的效果无法仅用 CSS 实现？
3 个赞
是的，没错。
我刚刚 发现了这个论坛，它似乎实现了我想要的效果。
经过进一步搜索，我找到了他们使用的 CSS，但我刚到这里，仍在努力理解如何添加 CSS 来实现这样的修改。
在您的示例站点中，他们使用了 2 张图片。
一张是透明背景的 Logo，另一张是 d.header 的背景图：
.d-header {
background: url("https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg") center center;
}
4 个赞
是的，这似乎是正确的方向 
我现在只需要弄清楚如何添加该 CSS。
我正在使用“蓝色阴影”主题。
我正在逐步学习 Discourse 指南，但也许还需要多读一些。
1 个赞
要添加 CSS，我认为最好的方法是创建一个新的主题组件，这样即使更新当前主题，您的修改也不会被覆盖。
进入您的管理面板 → 自定义 → 主题 → 组件 → 安装 → 创建新组件
然后点击 添加到所有主题，或者手动选择主题，接着 编辑 CSS/HTML：
最后在 CSS 标签页中编写您的 CSS 代码。
4 个赞
谢谢，我按照你上面的教程操作，已经快成功了！
你让我对 Discourse 的工作原理有了更多了解。
今晚我会花些时间再深入学习一下。
再次感谢你的帮助。
3 个赞
关于 talksurf 页眉的讨论：
我能看出背景图片的来源，但左侧悬浮在背景图片上方的“talksurf”图片却找不到出处。
在 设置 > 品牌 > 徽标 中将“talksurf”添加为图片后，该图片会变得非常小，因为 Discourse 将其原始高度 120px 缩小到了仅 31px。而“talksurf”的高度远不止 31px。
Talksurf 的标志是一个普通标志，已在后台的品牌部分上传。
我上传了完全相同的标志，结果得到了一个 40 像素高的标志，没有任何自定义设置：
因此，我不明白为什么在您的论坛上它会显示为 31 像素。您能提供链接吗？这样我可以查看其 HTML 和 CSS 代码。
此外，以下是了解他们如何自定义页眉的方法：
- 打开 https://forum.talksurf.com/
- 在您的浏览器中（以 Chrome 为例），按 F12 键显示开发工具。
- 点击选择箭头：
- 点击页眉：
- 在开发工具的右侧查看 CSS：
前几条规则并非默认设置，而是自定义的。没有明显的方法可以知道这一点，您只能通过经验来判断……通过查看选择器、SCSS 文件名等。
3 个赞
[quote=“Canapin, 帖子：16，主题：146484”]
所以我不明白为什么在你的论坛上会是 31px。你能提供一个链接吗？这样我就可以查看 HTML 和 CSS。[/quote]
感谢帮助，URL 是 https://yas-cfr.discourse.group/。正如你所见，使用和你相同的标志，我得到的高度是 35px，这与你的（40px）不同。
Talksurf 图片的尺寸是 322 x 63px。
您需要移除以下 CSS 规则：
.d-header #site-logo {
max-height: 35px !important;
}
这可能是您的主题中写入的内容，因此您需要覆盖它。
请注意，由于该规则使用了 !important，您也必须在自己的规则中添加：
.d-header #site-logo {
max-height: none !important;
}
6 个赞
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.