From 15dd403678344306185bf77f15f9d9b504973c7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8C=83=E9=BC=8E?= Date: Fri, 28 Dec 2018 09:59:03 +0800 Subject: [PATCH] Update code format, change MDN reference url (#21912) --- guide/chinese/css/background-opacity/index.md | 55 +++++++++++-------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/guide/chinese/css/background-opacity/index.md b/guide/chinese/css/background-opacity/index.md index 26f4f5111b..1e811d70f3 100644 --- a/guide/chinese/css/background-opacity/index.md +++ b/guide/chinese/css/background-opacity/index.md @@ -4,59 +4,66 @@ localeTitle: 背景不透明度 --- ## 背景不透明度 -opacity属性指定元素的不透明度/透明度,即元素后面的内容可见的程度。 +opacity 属性指定元素的不透明度/透明度,即元素后面的内容可见的程度。 -opacity属性的值可以是0.0 - 1.0。值越低,越透明: +opacity 属性的值可以是 0.0 - 1.0 。值越低,越透明: -[在此](https://www.w3schools.com/css/css_image_transparency.asp)查找更多详情 +[在此](https://www.w3schools.com/css/css_image_transparency.asp)了解更多详情 -您可以选择在何种程度上使元素透明化。 您必须添加以下CSS属性才能实现透明度级别。 +您可以控制一个元素有多透明。 +您必须添加以下CSS属性才能实现透明度级别。 **完全不透明** ```css .class-name { - opacity:1; - } + opacity: 1; +} - OR +或者 - .class-name { - opacity:1.0; - } +.class-name { + opacity: 1.0; +} ``` **半透明** ```css .class-name { - opacity:0.5; - } - Opacity value can be anything between 0 and 1; + opacity: 0.5; +} +Opacity 可以是 0 到 1 之间的任何值; ``` **透明** ```css .class-name { - opacity:0; - } + opacity: 0; +} - OR +或者 - .class-name { - opacity:0.0; - } +.class-name { + opacity: 0.0; +} ``` -或者,您可以使用透明的rgba值,如下所示: \`\`\`CSS +或者,您可以这样使用透明的 rgba 值: -。班级名称{ background-color:rgba(0,0,0,.5); } \`\`\` 上面的示例将背景设置为黑色,不透明度为50%。 rgba值的最后一个值是alpha值。 α值为1等于100%,0.5(简称为.5)则为50%。我们使用此方法为元素添加透明度而不影响内部内容。 +```css +.class-name{ + background-color: rgba( 0, 0, 0, .5); +} +``` + +上例中将背景设置为不透明度为50%的黑色。 rgba 值的最后一个值是 alpha 值。 alpha 值为 1 就是 100% , 0.5 (简写为 .5 )就是 50% 。我们使用此方法为元素添加透明度而不影响内部内容。 -[用于显示背景不透明度范围的codepen示例](https://codepen.io/lvcoulter/full/dVrwmK/) +[用于显示背景不透明度范围的 codepen 示例](https://codepen.io/lvcoulter/full/dVrwmK/) #### 更多信息: -有关更多信息,请访问[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) [CSS-Tricks的Opacity CSS属性](https://css-tricks.com/almanac/properties/o/opacity/) +有关更多信息,请访问 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity) [CSS-Tricks 的 Opacity CSS 属性](https://css-tricks.com/almanac/properties/o/opacity/) -浏览器支持: [caniuse](https://caniuse.com/#search=opacity) \ No newline at end of file +浏览器支持: [caniuse](https://caniuse.com/#search=opacity)