如何保持背景图像质量清晰？答案

【问题标题】：How to keep a background image quality crisp?如何保持背景图像质量清晰？
【发布时间】：2020-02-19 12:36:00
【问题描述】：

我在一个调查平台上工作，在这个调查平台中，我为我的调查使用了一个预定义的模板。该平台允许 CSS“修改”，我试图让标题图像质量不降低。图片上传为1170*295，但需要显示为760*192。

该平台提供了一个简单的图片标题上传选项，但仅限于特定大小。我的图片的“高度”低于他们的标准。

image-rendering: crisp-edges;（或-webkit-optimize-contrast）之类的东西没有任何作用。 “结束文本”以蓝色显示（是的，我是一个完整的初学者，任何形式的编程都不是我工作的一部分）。

标题图片

div.questionnaire-header {
   background: url("/images/uploaded/ANFCZ1FSC5C2?width=760&height=192") no-repeat center left;
}

我希望标题图像以清晰、明快的文字显示，而不是模糊。

【问题讨论】：

【解决方案1】：

将 background-size 属性设置为图像的 100% 以填充图像元素。

【讨论】：

【解决方案2】：

您的图片正在拉伸以适应页眉的大小。没有真正简单的方法可以在 css 中放大图像并保持质量。要么将标题的宽度更改为 760 像素，要么找到大于 1170 x 295 的图像

【讨论】：

【解决方案3】：

将 background-size 属性设置为 100%，以便我们的图像填充图像元素。将 background-position 属性设置为 50% 50% 以在图像元素中对齐背景图像。

【讨论】：

这几乎解决了它，但它引起了一个新问题。质量确实变高了（谢谢！），但现在标准标题大小（大约 200px 高）被背景图像填充，显示了我想要的标题后面的“双”痕迹。 This is what appears above and below the header。有什么办法可以避免吗？
没关系；我通过简单地在标题图像上方和下方添加一些空白像素来解决它。非常感谢普里扬卡的帮助！我真的很感激。