css 背景颜色怎么设置


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中,可以使用background-color属性来设置背景颜色,语法“background-color:颜色值;”。颜色值可以使用颜色名、十六进制数值、RGB或RGBA值、HSL或HSLA值来定义。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css设置背景颜色

background-color 属性设置元素的背景颜色。

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。

示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<html>

<head>

 

<style type="text/css">

 

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

 

p.no2 {background-color: gray; padding: 20px;}

 

</style>

 

</head>

 

<body>

 

<h1>这是标题 1</h1>

<h2>这是标题 2</h2>

<p>这是段落</p>

<p class="no2">这个段落设置了内边距。</p>

 

</body>

</html>

效果图:

1.png

(学习视频分享:css视频教程)

css颜色值的写法:

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)

色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。
饱和度和明度由百分数来表示。
100% 是满饱和度,而 0% 是一种灰度。
100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。

1

2

3

hsl(120,100%,25%)    /* 深绿色 */ 

hsl(120,100%,50%)    /* 绿色 */      

hsl(120,100%,75%)    /* 浅绿色 */

扩展:HSLA,色相-饱和度-明度-阿尔法(HSLa)

HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。 a 表示透明度:0=透明;1=不透明。

1

2

3

4

hsla(240,100%,50%,0.05)   /* 5% 不透明 */  

hsla(240,100%,50%, 0.4)   /* 40% 不透明 */ 

hsla(240,100%,50%, 0.7)   /* 70% 不透明 */ 

hsla(240,100%,50%,   1)   /* 完全不透明 */

5、transparent

特殊颜色值,表示透明色。可以直接当做颜色使用。

例如:color:transparent 设定字体颜色为透明

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<style type="text/css">

    body{background:hsl(270,100%,50%)}

    p{

        font-size:50px;

        font-family:"黑体";

        /*浏览器私有属性*/

        -webkit-text-fill-color:transparent;/*设置文本透明*/

        /*使用rgba(0,0,0,0);也可以实现全透明模式*/

        -webkit-text-stroke:2px yellow;/*将文本设置透明,再设置个边框后就实现镂空字了*/

        /*W3C标准属性*/

        /*text-fill-color:transparent;*/

        /*text-stroke:2px yellow;*/

     

    }

</style>

<body>

    <p>2012年过去了,最忙的是元芳,你怎么看?</p>

</body>

更多编程相关知识,请访问:编程入门!!

以上就是css 背景颜色怎么设置的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css多级菜单的实例代码讲解

ie css背景图片不显示怎么办

css怎么实现首字母下沉效果

怎样在css中解决长英文单词的页面显示问题?

css怎么设置按钮样式

css字体如何加粗

如何让css hover 失效

怎么让css文件里图片居中

css中背景图片怎么设置

css文件怎么解压缩

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




打赏

取消

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

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

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

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

评论

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