CSS 背景颜色 background-color属性

背景颜色是背景应用中最基础的属性，使用 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 所示：

图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 上开源。

CSS 背景颜色 background-color属性相关推荐

css 背景颜色 background属性
背景颜色 background 含义: 背景是指在盒子结构中,衬托在边框线范围以内的背景颜色或背景图. 可以设置背景颜色,或背景图,或同时设置.其中背景图有多项参数可设置. 主要的背景属性设置有: 设 ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
从零开始学前端：CSS背景颜色 --- 今天你学习了吗？（CSS：Day09）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS字体属性和文本属性 - 今天你学习了吗?(CSS:Day08) 文章目录从零开始学前端:程序猿小白 ...
CSS背景（background）
CSS背景backgroud 背景颜色(color) 背景图片(image) 背景平铺(repeat) 背景位置(position)重点背景附着背景简写背景透明(CSS3) 背景总结理解背景 ...
CSS背景颜色设置背景附着背景平铺背景位置背景简写背景透明
CSS背景设置方法及背景附着 1.背景颜色(color) 语法: background-color:颜色值; 默认值是 transparent 透明的 2.背景图片(image) 语法: backgr ...
css中背景颜色用哪个,CSS 背景颜色
颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...
计算机底纹不起作用,CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11)...
CSS - 背景颜色在IE11中不起作用(CSS - background-color not working in IE11) 我有以下代码: .skills_column { padding: 5 ...
html滚动背景色没了,css背景颜色不显示怎么解决
css背景颜色不显示怎么解决 div css新手布局会遇到布局的背景颜色无法显示,一般布局背景无法显示通常原因如下: 1.由使用float浮动造成浮动产生无法显示css背景颜色 2.高度不够而产生背景 ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...

CSS 背景颜色 background-color属性

CSS 背景颜色 background-color属性相关推荐

最新文章

热门文章