CSS-背景顏色|background-color

阿德明網路發表於2018-09-12
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事件不會被重疊元素觸發


相關文章