div设置导航栏背景图片被拉伸变模糊的问题如何排查？

问题原因 #

• 背景图原始尺寸与容器渲染尺寸不匹配：当前div固定高度为90px，若navbar.png原始高度不足90px，或宽度小于div实际渲染宽度（div宽度设为70%，会随父容器/浏览器宽度动态变化），浏览器会自动拉伸背景图填充区域，导致边缘模糊。
• 高分屏适配问题：当前主流消费级设备的像素比（DPR）多为2~3，例如1倍尺寸为90px高的图，在2x屏幕上需要180px高的资源才能清晰显示，若仅使用1倍尺寸的原图，浏览器会将其拉伸适配设备像素，进而出现模糊。
• 未明确背景图缩放规则：代码中未设置background-size属性，部分浏览器在响应式场景下会自动调整背景图尺寸，触发拉伸模糊。
• 浏览器图像渲染策略影响：部分浏览器默认的图像拉伸算法优先保证过渡平滑，会牺牲边缘锐利度，对线条、文字较多的导航栏类图片影响尤其明显。

对应的效果对比图：

你提供的原代码如下：

<div id="TopCenter" style="width: 70%; background-color: #0F1841; 
top: 0px; position: absolute; height: 90px; left: 30%; 
background-image: url(navbar.png); background-repeat: no-repeat; 
background-position:left center; "></div>

解决方案 #

1. 替换适配多倍尺寸的资源
   先确认div的实际渲染宽高，例如实际渲染宽为W像素、高90px，就准备至少W*设备像素比尺寸的原图，导出2x、3x版本，通过image-set配置多倍图适配：

background-image: image-set(
  url("navbar.png") 1x,
  url("navbar@2x.png") 2x,
  url("navbar@3x.png") 3x
);

2. 明确配置背景图缩放规则，避免自动拉伸，固定背景图尺寸适配规则：

/* 高度铺满容器，宽度自适应，避免不规则拉伸 */
background-size: auto 100%;
/* 若需完整显示背景图可使用contain，需铺满可使用cover，也可直接设置固定像素值 */

3. 调整图像渲染规则，针对线条、文字多的导航栏图可添加以下属性强制边缘锐利：

image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;

4. 优先使用SVG矢量图替代PNG位图，矢量图任意缩放都不会出现模糊问题。

内容的提问来源于stack exchange，提问作者Roger Travis