码农教程 - 一技在手,衣食无忧! tools

目录

CSS mask-size 属性

❮上一节 完整的CSS参考 下一节❯

示例

设置遮罩层图片的大小（以百分比为单位）：

.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-size属性指定遮罩层图片的大小。

默认值： 汽车
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.maskSize="100px 200px"

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

-webkit- 后面的数字指定使用前缀的第一个版本。

Property
mask-size 4.0 -webkit- 79.0 -webkit- 53.0 4.0 -webkit- 15.0 -webkit-

CSS 语法

mask-size: auto| size|contain|cover|initial|inherit;

属性值

Value Description
auto This is default
size Specifies the size of the mask image in px, em, etc, or in %
contain Scales the mask image in a way that both its width and its height fit inside the container
cover Scales the mask image in a way that both its width and its height cover the container
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: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 200px 200px;
  mask-size: 200px 200px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
亲自试一试 »

相关页面

CSS 参考：掩模图片属性

CSS 参考：掩码模式属性

CSS 参考：掩码起源属性

CSS 参考：掩模位置属性

CSS 参考：掩码重复属性

CSS教程：CSS 屏蔽


❮上一节 完整的CSS参考 下一节❯