如何在img标签上方添加背景色？（适配Angular NgOptimizedImage）

方法1：直接给容器设置背景色 #

这是最贴合你需求的方式，和你之前用background-image的逻辑一致——给外层容器加上background-color: #0B224A。因为fill指令会让图片占满整个容器，若图片存在透明区域，容器的深色背景就会自然透出来：

<div style="width: 100%;height: 490px;position: relative; background-color: #0B224A;">
    <img ngSrc="/Assets/cta.png" alt="call to action" fill priority >
</div>

方法2：叠加半透明背景层（适配图片无透明区域的场景） #

如果你的图片本身不透明，需要在图片上方叠加一层#0B224A的颜色来匹配设计，可以给容器添加一个绝对定位的覆盖层：

<div style="width: 100%;height: 490px;position: relative;">
    <img ngSrc="/Assets/cta.png" alt="call to action" fill priority >
    <!-- 叠加层可根据需求调整opacity值控制深浅 -->
    <div style="position: absolute; inset: 0; background-color: #0B224A; opacity: 0.6;"></div>
</div>

补充：为什么线性渐变没生效？ #

你之前尝试的线性渐变如果是直接加在img标签上，因为图片本身会覆盖背景（若图片无透明），所以看不到效果。把渐变写在容器上，或者用上述伪元素的方式，就能达到预期的色彩叠加效果。

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