diff options
Diffstat (limited to 'files/zh-cn/web/css/background-color')
| -rw-r--r-- | files/zh-cn/web/css/background-color/index.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/background-color/index.html b/files/zh-cn/web/css/background-color/index.html new file mode 100644 index 0000000000..85e0ff100f --- /dev/null +++ b/files/zh-cn/web/css/background-color/index.html @@ -0,0 +1,183 @@ +--- +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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">特性</th> + <th style="line-height: 16px;">Firefox (Gecko)</th> + <th style="line-height: 16px;">Chrome</th> + <th style="line-height: 16px;">Internet Explorer</th> + <th style="line-height: 16px;">Opera</th> + <th style="line-height: 16px;">Safari (WebKit)</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>1.0</td> + <td>4.0 [1]</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="border-color: transparent;"> + <tbody> + <tr> + <th style="line-height: 16px;">特性</th> + <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> + <th style="line-height: 16px;">Android</th> + <th style="line-height: 16px;">IE Phone</th> + <th style="line-height: 16px;">Opera Mobile</th> + <th style="line-height: 16px;">Safari Mobile</th> + </tr> + <tr> + <td>基础支持</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: In IE8-9, there is a bug where a computed {{cssxref("background-color")}} of <a href="/en-US/docs/Web/CSS/color_value#transparent_keyword"><code>transparent</code></a> causes <a href="/en-US/docs/Web/Events/click"><code>click</code></a> events to not get fired on overlaid elements. <a href="/en-US/docs/Web/Events/click#Browser_compatibility">See the <code>click</code> event documentation</a> for details.</p> + +<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> |