使用div class设置URL背景图片无法正常显示问题求助

API 探路者

2026-9-23

问题原因排查与解决

空div无明确宽高：你写的div是空元素，没有嵌套内容也没有手动设置宽高的情况下，默认高度为0，即便背景图加载成功也没有可见区域可以渲染，自然看不到图片，这是此类问题最常见的诱因。
背景属性配置缺失：background-image 仅负责声明背景图片资源，默认配置下：background-repeat: repeat 会重复平铺图片、background-size: auto 会保留图片原始尺寸不会适配div大小、background-position: 0 0 从左上角开始渲染，如果不按需调整这些属性，也可能出现显示不符合预期的情况。
URL格式不规范：当前你使用的URL没有特殊字符，不加引号也能生效，但如果URL包含空格、中文、括号等特殊字符时，没有用引号包裹会导致资源路径解析失败，建议统一给url内的路径加单/双引号，规避潜在解析问题。

修复示例

内联样式写法

<div class="main_product-img" 
     style="width: 500px;
            height: 500px;
            background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;">
</div>

Class关联CSS写法

HTML代码：

<div class="main_product-img"></div>

CSS代码：

.main_product-img {
  /* 可根据需求调整宽高数值，也可以用百分比、vw/vh等相对单位 */
  width: 500px;
  height: 500px;
  background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');
  /* 取值contain代表完整展示图片，不会裁切；取值cover代表铺满div，超出部分会裁切 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}