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/mask-image/index.html | 183 ++++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 files/zh-cn/web/css/mask-image/index.html (limited to 'files/zh-cn/web/css/mask-image/index.html') diff --git a/files/zh-cn/web/css/mask-image/index.html b/files/zh-cn/web/css/mask-image/index.html new file mode 100644 index 0000000000..cb3e1ce5d3 --- /dev/null +++ b/files/zh-cn/web/css/mask-image/index.html @@ -0,0 +1,183 @@ +--- +title: mask-image +slug: Web/CSS/mask-image +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

概要

+ +

mask-image CSS属性用于设置元素上遮罩层的图像。

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword value */
+mask-image: none;
+
+/* <mask-source> value */
+mask-image: url(masks.svg#mask1);
+
+/* <image< values */
+mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue);
+
+/* Multiple values */
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+
+/* Global values */
+mask-image: inherit;
+mask-image: initial;
+mask-image: unset;
+
+ +

Values

+ +
+
none
+
默认值，透明的黑色图像层，也就是没有遮罩层。
+
<mask-source>
+
<mask>或CSS图像的url
+
{{cssxref("<image>")}}
+
图片作为遮罩层
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

例子

+ +

CSS

+ +
#masked {
+  width: 100px;
+  height: 100px;
+  background-color: #8cffa0;
+  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
+}
+
+ +

HTML

+ +
<div id="masked"></div>
+
+ +

{{EmbedLiveSample('例子', '100px', '100px')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-mask-image", "mask-image")}}{{Spec2("CSS Masks")}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari (WebKit)
Basic support1.0{{property_prefix("-webkit")}}[1]{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}[3]
Multiple mask images1.0{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}
SVG masks8.0{{CompatNo}}[2]{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{property_prefix("-webkit")}}[4]{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}3.2{{property_prefix("-webkit")}}[5]
Multiple mask images{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
SVG masks{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}[2]{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Implemented in version 8.0, Chrome initially only supported the -webkit prefixed versions of gradients as values. Later, support for the unprefixed versions was added.

+ +

[2] This feature is not implemented yet. It is only available in Nightly and Dev Edition. See {{bug("1251161")}}.

+ +

[3] Implemented in version 4.0, Safari initially only supported the -webkit prefixed versions of gradients as values.

+ +

[4] Android initially only supported the -webkit prefixed versions of gradients as values.

+ +

[5] iOS Safari initially only supported the -webkit prefixed versions of gradients as values.

-- cgit v1.2.3-54-g00ecf