html怎么改变背景颜色


本文摘自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

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

    </head>

 

    <body style="background-color:red;"></body>

 

</html>

效果图:

1.png

说明:

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小,包括填充和边界(但不包括边距)。

语法:

1

background-color:颜色值;

颜色值的多种写法:

1、使用颜色名

虽然目前已经命名的颜色约有 184 种,但真正被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。

表1:CSS 规范推荐的颜色名称

1

2

3

4

5

6

7

/*名 称   颜 色 名 称 颜 色 名 称 颜 色

black   纯黑  silver  浅灰  navy    深蓝

blue    浅蓝  green   深绿  lime    浅绿

teal    靛青  aqua    天蓝  maroon  深红

red 大红  purple  深紫  fuchsia 品红

olive   褐黄  yellow  明黄  gray    深灰

white   壳白*/

不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。

2、十六进制颜色

十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。

这是最常用的取色方法,例如:

1

2

3

4

#f03

#F03

#ff0033

#FF0033

3、RGB,红-绿-蓝(red-green-blue (RGB))

规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比。

1

2

3

4

rgb(255,0,51)

rgb(255, 0, 51)

rgb(100%,0%,20%)

rgb(100%, 0%, 20%)

扩展:RGBA,红-绿-蓝-阿尔法(RGBa)

RGBA 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。

1

2

3

4

rgba(255,0,0,0.1)    /* 10% 不透明 */ 

rgba(255,0,0,0.4)    /* 40% 不透明 */ 

rgba(255,0,0,0.7)    /* 70% 不透明 */ 

rgba(255,0,01)    /* 不透明,即红色 */

4、HSL,色相-饱和度-明度(Hue-saturation-lightness)

阅读剩余部分

相关阅读 >>

Html标记中,表示网页标题的标记是什么

Html的<keygen> 标签

Html设置button的方法

Html align属性是什么含义?Html中的align属性设置方法介绍

当 position:sticky 遇到 bootstrap 浮动布局时候的踩坑记录

Html如何设置input不可编辑

h5新特性的用法:监听app自带的返回键

Html tfoot标签是什么意思?这里有Html tfoot标签的定义和用法实例

常用Html元素结构有哪些

Html怎么添加图片

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...