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
列印頁面
上一個
下一個
廣告