From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/background-color/index.html | 183 ++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/zh-cn/web/css/background-color/index.html (limited to 'files/zh-cn/web/css/background-color') 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 +--- +
{{CSSRef}}
+ +

概览

+ +

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

+ +
{{cssinfo}}
+ +

语法

+ +
/* 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;
+
+ +
+
background-color 属性只能使用 <color> 值。
+
+ +

取值

+ +
+
<color>
+
一个描述背景统一颜色的 CSS {{cssxref("<color>")}} 值。即使一个或几个的 {{cssxref("background-image")}} 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，transparent 是一种颜色。
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

示例

+ +

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;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Examples","200","150")}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Though technically removing thetransparentkeyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}没有变化
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
基础支持{{CompatGeckoDesktop("1.0")}}1.04.0 [1]3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特性Firefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
基础支持{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]: In IE8-9, there is a bug where a computed {{cssxref("background-color")}} of transparent causes click events to not get fired on overlaid elements. See the click event documentation for details.

+ +

查看更多

+ + -- cgit v1.2.3-54-g00ecf