1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: background-color
slug: Web/CSS/background-color
tags:
- CSS Background
- CSS Property
- CSS_参考
- Reference
translation_of: Web/CSS/background-color
---
<div>{{CSSRef}}</div>
<h2 id="概览" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">概览</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a>属性中的 <strong>background-color </strong>会设置元素的背景色, 属性的值为颜色值或关键字"transparent"二者选其一.</p>
<div>{{cssinfo}}</div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="brush: css">/* Keyword values */
background-color: red;
/* Hexadecimal value */
background-color: #bbff00;
/* RGB value */
background-color: rgb(255, 255, 128);
/* 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;
</pre>
<dl>
<dd><code>background-color</code> 属性只能使用 <code><color></code> 值。</dd>
</dl>
<h3 id="Values" name="Values" style="font-size: 1.71428571428571rem;">取值</h3>
<dl>
<dt><code><color></code></dt>
<dd>一个描述背景统一颜色的 CSS {{cssxref("<color>")}} 值。即使一个或几个的 {{cssxref("background-image")}} 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，<code>transparent</code> 是一种颜色。</dd>
</dl>
<h3 id="正式语法" style="font-size: 1.71428571428571rem;">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153,102,153);
color: rgb(255,255,204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample("Examples","200","150")}}</p>
<h2 id="Specifications" name="Specifications" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Though technically removing the<code>transparent</code>keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>没有变化</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background-color', 'background-color')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
{{Compat("css.properties.background-color")}}
<h2 id="查看更多" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">查看更多</h2>
<ul>
<li>
<p><a href="https://developer.mozilla.org/en/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a></p>
</li>
</ul>
|
