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

目录

CSS mask-origin 属性

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

示例

使用mask-origin: border-box;和mask-origin: content-box;:

.mask1 {
  width: 600px;
  height: 400px;
  background: green;
  border: 20px solid red;
  padding: 50px;
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 80%;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
}

.mask2 {
  width: 600px;
  height: 400px;
  background: green;
  border: 20px solid red;
  padding: 50px;
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 80%;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个mask-origin属性指定遮罩层图片的原点位置（遮罩位置区域）。

默认值： 边框
遗传： 不
可动画： 不。阅读可动画的
版本： CSS3
JavaScript 语法： 对象.style.maskOrigin="padding-box"

浏览器支持

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

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

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

CSS 语法

mask-origin: border-box|content-box|padding-box|margin-box|fill-box|stroke-box|view-box|initial|inherit;

属性值

Value Description
border-box The position is relative to the border box. This is default
content-box The position is relative to the content box
padding-box The position is relative to the padding box
margin-box The position is relative to the margin box
fill-box The position is relative to the object bounding box
stroke-box The position is relative to the stroke bounding box
view-box Use the nearest SVG viewport as reference box
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

更多示例

示例

使用mask-origin: border-box;和mask-origin: content-box;:

.mask1 {
  width: 600px;
  height: 400px;
  background: green;
  border: 20px solid red;
  padding: 50px;
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 80%;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: border-box;
  mask-origin: border-box;
}

.mask2 {
  width: 600px;
  height: 400px;
  background: green;
  border: 20px solid red;
  padding: 50px;
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  -webkit-mask-size: 80%;
  mask-size: 80%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}
亲自试一试 »

相关页面

CSS 参考：掩模图片属性

CSS 参考：掩码模式属性

CSS 参考：掩模位置属性

CSS 参考：掩码重复属性

CSS 参考：掩模尺寸属性

CSS教程：CSS 屏蔽


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