本文摘自PHP中文网,作者青灯夜游,侵删。
在html中,可以通过设置标签元素的style属性,添加“background-color:颜色值;”样式来改变背景颜色,例“<body style="background-color:red;"></body>”。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
html改变背景颜色
1 2 3 4 5 6 7 8 9 10 |
|
效果图:
说明:
background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
语法:
1 |
|
颜色值的多种写法:
1、使用颜色名
虽然目前已经命名的颜色约有 184 种,但真正被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。
表1:CSS 规范推荐的颜色名称
1 2 3 4 5 6 7 |
|
不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。
2、十六进制颜色
十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。
这是最常用的取色方法,例如:
1 2 3 4 |
|
3、RGB,红-绿-蓝(red-green-blue (RGB))
规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比。
1 2 3 4 |
|
扩展:RGBA,红-绿-蓝-阿尔法(RGBa)
RGBA 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。
1 2 3 4 |
|
4、HSL,色相-饱和度-明度(Hue-saturation-lightness)
相关阅读 >>
Html align属性是什么含义?Html中的align属性设置方法介绍
当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录
Html tfoot标签是什么意思?这里有Html tfoot标签的定义和用法实例
更多相关阅读请进入《Html》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者