← 返回 Web 词条Webbackground-color原生支持点选数值,样本实时变化
背景色
在 Web 上叫background-color
CSS: background-color
与 background 简写不同:background 还包含背景图、位置、重复等,这条只管颜色那一层。
铺在元素内容后面的那一层颜色,用来把这块区域和周围分开。
- 把底色换掉
- 后面那层颜色
- 块的颜色
- 背景色
- 底色
- 填充色
示例
background-color: #3FCF8E;
其他平台的相似实现
iOS原生支持
background异名官方描述是「把视图的背景设置为某个 style」——style 可以是颜色,也可以是渐变或材质。
看 iOS 视角 →Android原生支持
background异名官方描述是「在内容后面以纯色绘制 shape」。
看 Android 视角 →跨端框架实现
- Flutter
BoxDecoration.colorContainer(decoration: BoxDecoration(color: …))
使用规范
什么时候用
- 需要区分区域层级时
- 需要表达选中或悬停状态时
什么时候别用
- 要让整个元素连内容一起变淡时——那是不透明度
- 仅靠颜色传达信息、不给第二重线索时