css设置背景颜色background_RGB颜色值对照表

(3) 2024-06-27 16:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
css设置背景颜色background_RGB颜色值对照表,希望能够帮助你!!!。

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

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


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

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


  1. div {
  2. width: 200px;
  3. height: 60px;
  4. border: 10px dashed #444;
  5. background-color: rgba(0,152,50,0.7);
  6. }

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

css设置背景颜色background_RGB颜色值对照表_https://bianchenghao6.com/blog__第1张图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 上开源。

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

上一篇

已是最后文章

下一篇

已是最新文章

发表回复

相关推荐