背景颜色 | background-color (Backgrounds & Borders) - CSS 中文开发手册 - Break易站


  • ??CSS 中文开发手册

    背景颜色 | background-color (Backgrounds & Borders) - CSS 中文开发手册

    CSS属性中的?background-color?会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一

    /* Keyword values */
    background-color: red;
    
    /* Hexadecimal value */
    background-color: #bbff00;
    
    /* Hexadecimal value with alpha channel */
    background-color: #11ffee00; /* 00 - fully transparent */
    background-color: #11ffeeff; /* ff - fully opaque */
    
    /* RGB value */
    background-color: rgb(255, 255, 128);
    
    /* RGBA value or RGB with alpha channel */
    background-color: rgba(117, 190, 218, 0.0); /* 0.0 - fully transparent */
    background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */
    background-color: rgba(117, 190, 218, 1.0); /* 1.0 - fully opaque */
    ???????
    /* HSLA value */
    background-color: hsla(50, 33%, 25%, 0.75);
    
    /* Special keyword values */
    background-color: currentcolor;
    background-color: transparent;
    
    /* Global values */
    background-color: inherit;
    background-color: initial;
    background-color: unset;

    初始值

    transparent

    适用元素

    all elements. It also applies to ::first-letter and ::first-line.

    是否是继承属性

    no

    适用媒体

    visual

    计算值

    computed color

    Animation type

    a color

    正规顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    background-color属性被指定为单个<color>值。

    <color>是<color>描述背景的统一颜色的CSS 。即使background-image定义了一个或几个,如果图像不透明,透明度也会影响渲染效果。在CSS中,transparent是一种颜色。

    正式语法

    <color>where 
    <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
    where 
    <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
    <rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
    <hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
    <hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
    where 
    <alpha-value> = <number> | <percentage>
    <hue> = <number> | <angle>

    示例

    HTML

    <div class="exampleone">
     Lorem ipsum dolor sit amet, consectetuer
    </div>
    
    <div class="exampletwo">
      Lorem ipsum dolor sit amet, consectetuer
    </div>
    
    <div class="examplethree">
      Lorem ipsum dolor sit amet, consectetuer
    </div>

    CSS

    .exampleone {
      background-color: teal;
      color: white;
    }
    
    .exampletwo {
      background-color: rgb(153,102,153);
      color: rgb(255,255,204);
    }
    
    .examplethree {
      background-color: #777799;
      color: #FFFFFF;
    }

    结果

    规范

    Specification

    Status

    Comment

    CSS Backgrounds and Borders Module Level 3The definition of ‘background-color‘ in that specification.

    Candidate Recommendation

    Though technically removing the transparent keyword, this doesn‘t change anything as it has been incorporated as a true <color>

    CSS Level 2 (Revision 1)The definition of ‘background-color‘ in that specification.

    Recommendation

    No change

    CSS Level 1The definition of ‘background-color‘ in that specification.

    Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox

    Internet Explorer

    Opera

    Safari

    Basic Support

    1.0

    12

    1.0

    4.01

    3.5

    1.0

    Alpha channel for hex values

    52.0

    No

    No

    No

    No

    No

    Feature

    Android

    Chrome for Android

    Edge mobile

    Firefox for Android

    IE mobile

    Opera Android

    iOS Safari

    Basic Support

    (Yes)

    (Yes)

    (Yes)

    1.0

    (Yes)

    (Yes)

    (Yes)

    Alpha channel for hex values

    52.0

    52.0

    No

    No

    No

    No

    No

    在Internet Explorer 8和9中,存在一个错误,即计算background-color的transparent会使得click事件不会被重叠元素触发

    
    
  • ??CSS 中文开发手册
  • 转载请保留页面地址:https://www.breakyizhan.com/css/32255.html

    背景颜色 | background-color (Backgrounds & Borders) - CSS 中文开发手册 - Break易站

    上一篇:.net core获取appsettings CustomSettings


    下一篇:007-Zabbix网页汉化实战