如何在CSS与HTML中为img标签设置生效的背景色

你遇到的背景色不生效是两个常见问题叠加导致的：

• CSS语法错误：原本写的background-color: "#3333";给颜色值加了多余的双引号，这在任何CSS规则里都是无效写法，浏览器会直接忽略这条声明，不会给任何元素应用这条背景色规则。之前用div的时候可能因为其他样式覆盖、或者浏览器容错机制让你误以为生效了，换成img标签后没有容错逻辑，就会表现为完全不生效。
• 元素渲染逻辑差异：之前用div实现效果时，div本身没有内置的内容层，通过background-image引入的图片和设置的背景色都属于元素的背景渲染层级，只要图片没完全铺满div，背景色就会自然露出；但img是替换元素，通过src引入的图片属于元素的最高优先级内容层级，比元素自身的背景色层级更高，如果图片完全占满了元素的可视区域，设置的背景色会被直接遮挡，即便语法正确也看不到效果。

根据不同的使用场景，可以对应调整写法：

1. 基础语法修正
   首先去掉颜色值上的多余引号，CSS中的颜色、尺寸这类非字符串类型的属性值，不需要用引号包裹，正确写法为：

   .image {
     background-color: #3333;
   }
   

   修正语法后，当图片加载失败时，露出的元素空白区域会自动显示设置的背景色，不需要额外调整。
2. 图片正常加载时露出背景色
   如果需要在图片正常显示的状态下看到设置的背景色，可以通过两种方式留出背景色的显示空间：
   • 给img设置内边距，在图片和元素边框之间留出空隙，空隙区域会显示背景色，示例代码：

     .image {
       background-color: #3333;
       /* 四周留出8px的内边距展示背景色 */
       padding: 8px;
       /* 避免内边距撑大元素整体尺寸 */
       box-sizing: border-box;
     }
     

   • 给img设置object-fit: contain属性，让图片按原始比例缩放适配元素尺寸，元素内没有被图片填满的留白区域会自动露出背景色，示例代码：

     .image {
       width: 400px;
       height: 300px;
       background-color: #3333;
       /* 图片按比例缩放，不拉伸、不裁切占满区域 */
       object-fit: contain;
     }
     

• CSS中仅url()、带空格的字体名称这类字符串属性值需要加引号包裹，颜色值、长度值、关键字类属性值加引号都会导致样式解析失效。
• 如果是想要实现半透明遮罩叠在图片上层的效果，直接给img设置背景色是实现不了的，因为背景色的渲染层级在图片内容的下方，需要通过伪元素或者外层容器叠加遮罩层实现。

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