揭秘CSS(第 1 版)
4.5.1 背景颜色
阅读(

概述

CSS选择器

字体和文本

盒模型

概述

内边距

外边距

边框

背景

背景颜色

背景颜色是背景应用中最基础的属性,使用 background-color属性,几乎可以为任何元素定义背景颜色,该属性不能被继承,其默认值是 transparent,即透明背景。也就是说,如果一个元素没有显式定义背景颜色,那么其背景是透明的,就可以透过该元素看到其祖先元素的背景。

background-color属性接受任意合法的CSS颜色值,如预定义的颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值。如:

h1  { background-color: gray; }                /* 灰色背景 */
h2  { background-color: #ccc; }                /* 灰色背景 */
p   { background-color: rgba(0,152,50,0.7); }  /* 70%不透明度的背景 */
div { background-color: transparent; }         /* 完全透明背景 */

默认情况下,元素的背景颜色会延伸边框的外边界。因此,对于间断的边框,如虚线或点线,元素的背景会出现在边框的可见部分。如:

div {
   width: 200px;
   height: 60px;
   border: 10px dashed #444;
   background-color: rgba(0,152,50,0.7);
}

上述代码的运行结果如图 4‑24 所示:

background-color效果
图4-24 background-color效果

从上图可以看出,元素的背景颜色延伸到了边框的下面,透过虚线边框的间隙,可以看到背景颜色。

不过,在CSS2中规定,背景颜色只延伸到内边距,而不是边框。在CSS2.1中,对此作了更正,并明确指出元素的背景是内容、内边距和边框区域的背景。所以,一些较老的浏览器可能会有不同的表现。

另外,考虑到浏览器的兼容性,如果使用RGBA、HSL和HSLA来定义背景颜色,一般会先定义一个十六进制颜色的背景作为对老浏览器的备用颜色,然后再定义RGBA、HSL和HSLA颜色的背景。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验