页面颜色未显示预期效果，主因是元素未渲染或被覆盖：尺寸为0、浮动塌陷、绝对定位无宽高、flex/grid塌缩、background复合属性覆盖、display-p3色域未激活、深色模式/滤镜干扰等。
颜色值写对了，但页面没显示预期效果——大概率不是代码错，而是它根本没被渲染出来，或者被别的东西“盖住”“压暗”“降级”了。
元素尺寸为0导致background-color不可见
background-color只作用于内容区+padding区，如果元素宽高是0，再亮的红色也看不见。
- 浮动子元素未清除，父容器高度塌陷 → 父元素背景消失
- 绝对定位元素没设width/height，又没内容 → 尺寸收缩到0
- Flex/Grid子项为空，且没设min-width/min-height → 也可能塌缩
- 验证方法：DevTools里选中该元素，看Layout面板的width/height是否为0；临时加
border: 1px solid red立刻暴露问题
background复合属性覆盖background-color
只要某条规则用了background（哪怕只写了一张图），就会把background-color、background-image等全部重置为初始值。
- 检查所有匹配该元素的选择器，搜
background:出现的位置 - 避免分开写：
background: url(logo.png);和background-color: #fff;在不同规则里极易冲突 - 统一用复合写法更安全，例如：
background: #fff url(img.png) no-repeat center; - 特别注意内联样式
style="background: ..."或带!important的规则，优先级极高，容易掩盖你的设置
Display-P3色域未激活导致color(display-p3)发灰
写了color(display-p3 1 0 0)却看着像褪色的sRGB红，不是你数值填错了，是浏览器根本没走P3渲染管线。
- 必须同时满足三个条件：设备硬件支持（iPhone 12+、iPad Pro）、系统广色域已开启（默认开）、页面上下文启用P3色彩管理
- 漏了
@supports (color: color(display-p3 0 0 0))包裹，Safari会直接跳过整条声明 -
background-color是P3支持最不稳定的属性，建议改用background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0)) - 别在带
opacity、filter或transform的父容器里设P3背景——整个层叠上下文会被强制降级为sRGB
深色模式、滤镜或透明度干扰最终呈现
看起来设的是rgb(30, 144, 255)，实际发灰，可能是颜色被混合、偏移或降级了。
- 父元素设了
opacity或background-blend-mode，子元素颜色被全局混合 - 文字放在半透背景上（如
background: rgba(255,255,255,0.9)），产生视觉灰度错觉 - 用了
filter: brightness(0.9) contrast(1.1)等，改变了原始RGB表现 - 深色模式下，
:root里的CSS变量（如--primary-color）可能没更新，或媒体查询没覆盖到目标元素
真正难的不是写对颜色值，而是确认它从CSS计算→层叠上下文→合成管线→屏幕输出这条链路上，每一步都没被意外截断或转换。尤其在移动端和深色模式场景下，一个@supports块漏掉、一层transform套错、甚至系统夜间模式开着，都足以让颜色“消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
