CSS实现图片透明文字时background属性被覆盖问题咨询

你在开发者工具里看到background: rgb(0, 0, 0);被划去是CSS运行的正常表现，不属于样式冲突错误，也不会破坏你要的半透明文字覆盖效果。

核心逻辑是CSS的同属性覆盖规则：在同一个选择器的样式块内，对同一个属性重复赋值时，写在后面的合法属性值会覆盖前面的值，浏览器最终只渲染最后一条可识别的声明。

你为.text-block类编写的背景相关代码本身就刻意写了两条背景声明：

.text-block {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
    color: #f1f1f1;
    padding: 20px;
}

• 靠前的background: rgb(0, 0, 0)是兼容降级方案，专门给不支持rgba透明色语法的老旧浏览器准备，这类浏览器识别不了后面的半透明写法，就会渲染纯黑色背景
• 靠后的background: rgba(0, 0, 0, 0.5)是你实际要的半透黑效果，现代浏览器都能识别这个语法，自然会覆盖前面的纯色背景声明，最终渲染出你看到的半透明文字块效果。

补充说明：你当前CSS里定义的.container .content样式属于冗余代码，因为HTML里的文字块用的类名是text-block，没有用content类，这段样式不会对当前页面产生任何影响。

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