zoukankan      html  css  js  c++  java
  • 背景颜色 | background-color (Backgrounds & Borders)

  •   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
  • 相关阅读:
    Dubbo教程:入门到实战
    阿里面试Java程序员都问些什么?
    Canon MF113W激光打印机双面打印方法
    MacBook Pro App Store无法下载和更新软件解决方案
    收不到Win10正式版预订通知?一个批处理搞定
    创业公司失败的20大原因:没市场需求排第一
    最新版本sublime text3注册码
    Spring MVC 知识点整理
    Nginx子域名配置
    Install Local SQL In Mac OS
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13233291.html
Copyright © 2011-2022 走看看