大家好 — 我正在尝试创建一个如下面的截图所示的类别横幅：
目标
- 与模型相同的布局：带有特定于类别的背景图片以及叠加的标题/描述的大横幅。
- 平滑加载（无闪烁/调整大小），完全响应式。
- 背景必须是每个类别独有的图片（而非全局 CSS 样式）。
我尝试过的方法
- 使用自定义 JavaScript 注入图片和文本。这有效，但图片先加载然后调整大小，导致卡顿的过渡/布局偏移。
- “类别横幅”组件让我接近了目标，但我无法匹配这个确切的布局和每个类别的图片要求。
提问
- Discourse 中实现此目标的推荐方法是什么？
- 有没有什么 CSS/HTML 模式的示例可以预留空间（例如，固定宽高比包装器/object-fit）并避免 CLS？
- 关于使用每个类别的上传或主题设置来干净地设置背景图片的技巧。
谢谢！
1 个赞
这是一个非常粗糙的演示（我没有使用主题卡片），但我认为你可以轻松地使用内置的类别背景图片来实现这一点：
如果你在类别设置中添加类别背景
这会将图片放置在 body 标签上。也许然后调整 CSS 以达到你喜欢的效果（我的示例是 400px）：
`+ 一些文本对齐的调整，我认为你应该可以得到你想要的近似效果？主要缺点是它是全宽的，所以在更宽的屏幕上你会看到它伸出来。
它并不完美，但速度很快 
1 个赞
Lilly
(Lillian Louis)
3
我认为我见过的最接近您想要的主题组件是这个：
您可以看看那个组件以获得一些想法，但听起来您可能需要构建一个自定义组件。如果您正在寻找可以帮助您的开发人员，您可以在 Marketplace 发布求助信息。
是的，那个主题组件可能是一个更好的选择，以前没见过，TIL
