CSS设置background-image不显示，添加img标签后重叠关联异常是什么原因

问题根因分析 #

1. 初始状态背景图不显示的原因
   你没有给#generalButton元素设置明确的宽高属性，空div默认高度为0，宽度在无内容时也不会自动生成可绘制区域，背景图只能渲染在元素本身的盒模型范围内，没有承载空间自然看不到背景图。

2. 添加img标签后出现两张重叠图的原因
   img属于行内替换元素，自带图片固有宽高，会将父元素#generalButton撑开出足够的显示区域，这时候父元素有了渲染空间，你写的background-image规则就会生效，最终显示的两张图分别是：img标签渲染的原图、#generalButton的背景图。你设置了background-size:70%和居中对齐，和img默认的左上对齐、原尺寸展示效果不同，所以会出现位置不同的重叠效果。

3. 删除background-image后img同步消失的原因
   该现象由未贴出的额外CSS规则导致，常见触发场景包括：

• 你给#generalButton设置了高度为0，仅靠背景图相关的规则触发了高度赋值，删除背景图后父元素高度回到0，img被溢出隐藏（比如父级设置了overflow:hidden）
• 存在关联背景图属性的元素显示规则，例如只有当#generalButton存在background-image属性时，才将内部img设置为可见
• 浏览器缓存/代码修改失误导致的偶发异常，清空缓存后重试即可验证

解决方案 #

如果仅用背景图实现效果，直接给#generalButton设置明确的宽高即可，示例代码：

#generalButton{
    width: 100px; /* 替换为实际需要的宽度 */
    height: 100px; /* 替换为实际需要的高度 */
    background-image:url(files/gss.png);
    background-position:center center;
    background-repeat: no-repeat;
    background-size: 70%;
}

如果要使用img标签实现，删除background-image相关的CSS规则即可，不需要同时用两种方式加载同一张图。

内容的提问来源于stack exchange，提问作者Di Jia