为图片创建遮罩层:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
亲自试一试 »
下面有更多 "亲自试一试" 示例。
这个mask-image
属性指定用作元素的遮罩层的图片。
提示:CSS 中的线性和径向渐变也可以用作遮罩图片。
默认值: | 没有任何 |
---|---|
遗传: | 不 |
可动画: | 不。阅读可动画的 |
版本: | CSS3 |
JavaScript 语法: | 对象.style.maskImage="url(star.svg)" |
表中的数字指定完全支持该属性的第一个浏览器版本。
-webkit- 后面的数字指定使用前缀的第一个版本。
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
mask-image: none|
image|
url|initial|inherit;
Value | Description |
---|---|
none | This is default |
image | An image to use as the mask layer |
url | An url reference to an image or an SVG <mask> element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
为具有线性和径向渐变的图片创建不同的遮罩层:
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}
.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
-webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5));
}
亲自试一试 »
使用 SVG <mask> 元素为图片创建遮罩层:
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
亲自试一试 »
使用 SVG <mask> 元素为图片创建遮罩层:
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
亲自试一试 »
CSS 参考:掩码模式属性
CSS 参考:掩码起源属性
CSS 参考:掩模位置属性
CSS 参考:掩码重复属性
CSS 参考:掩模尺寸属性
CSS教程:CSS 屏蔽
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!