CSS - mask-origin 属性

上一个
下一个

CSS mask-origin 属性规定遮色图像的原点。此属性提供以单个盒子显示的元素的遮罩定位区域，换句话说，它指定由 mask-image CSS 属性确定的图像的原点位置。

语法

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

属性值

值 说明
content-box 它将遮色图像的原点设置为相对于内容盒的外边缘。
padding-box 它将遮色图像的原点设置为相对于填充盒的外边缘。
border-box 它将遮色图像的原点设置为相对于边框盒的外边缘。默认值。
fill-box 它将遮色图像的原点设置为相对于对象边界框。
stroke-box 它将遮色图像的原点设置为相对于描边边界框。
view-box SVG 视窗可用作参考框。带有 `viewBox` 属性的 SVG 元素将把它们的内容定位在 `viewBox` 原点，并通过 `viewBox` 宽度和高度定义尺寸。
initial 它将属性设置为其默认值。
inherit 它从父元素中继承该属性。

CSS 遮色原点属性的示例

以下示例使用不同的值解释了 mask-origin 属性。

使用内容盒值的遮色原点属性

要将遮色相对元素的内容区域定位，不包括填充、边框和边距，我们使用 content-box 值。遮罩从内容区域的内边缘（显示元素的实际内容）开始应用。以下示例中演示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: content-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: content-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

使用填充盒值的遮色原点属性

要将遮色相对元素的填充区域定位，其中包括内容以及周围的任何填充，我们使用 padding-box 值。它允许遮色覆盖内容和填充区域，但不包括边框和边距。以下示例中演示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: padding-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: padding-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

使用边框盒值的遮色原点属性

要将遮色相对于元素的边框区域定位，其中包括内容、填充和边框区域，我们使用 border-box 值。遮色延伸到边框盒的外边缘，不包括边距。以下示例中演示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: border-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: border-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

使用 fill 盒值的遮色原点属性

要将遮色相对于 SVG 元素的 fill 区域定位，我们使用 fill-box 值。此框包括 SVG 形状或文本的填充覆盖的区域，并忽略填充、边框或边距。以下示例中演示了这一点。

示例

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: gray;
         border: 25px solid brown;
         padding: 25px;
         width: 70%;
         -webkit-mask-image: 
                     url("/css/images/border_image_source.png");
         mask-image: url("/css/images/border_image_source.png");
         mask-size: 50%;
      }

      .origin {
         mask-repeat: no-repeat;
         mask-origin: fill-box;
      }
   </style>
</head>
<body>
   <h2>
      CSS mask-origin property
   </h2>
   <h4>
      mask-origin: fill-box
   </h4>
   <div class="container origin">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=400 height=300>
   </div>
   <h4>
      full image:
   </h4>
   <div class="container">
      <img src="/css/images/scenery.jpg" 
      alt="img" width=350 height=200>
   </div>
</body>
</html>

受支持的浏览器

属性 Chrome Edge Firefox Safari Opera
mask-origin 120 120 53 15.4 106
css_properties_reference.htm
打印页面
上一个
下一个
广告