1. Web
  2. CSS
  3. mask-position

mask-position

Baseline 2023
新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

mask-position CSS 屬性為每個已定義的遮罩影像設定初始位置，該位置相對於由 mask-origin 設定的遮罩位置圖層。

語法

css
/* Single <position> keyword value */
/* Sets second value to 'center' */
mask-position: left;
mask-position: center;
mask-position: right;
mask-position: top;
mask-position: bottom;

/* Two <position> keyword values */
mask-position: left center;
mask-position: right top;

/* One length or percentage <position> value */
/* Horizontal position. Vertical position set to 'center' */
mask-position: 25%;
mask-position: 0px;
mask-position: 8em;

/* Two length or percentage <position> values */
/* First value: horizontal position. Second value: vertical position */
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/* Edge offsets: Four <position> values */
mask-position: bottom 10px right 20px;
mask-position: right 3em bottom 10px;
mask-position: bottom 10px right 0;

/* Multiple <position> values */
mask-position:
  top left,
  bottom 10px right 10px;
mask-position:
  1rem 1rem,
  center;

/* Global values */
mask-position: inherit;
mask-position: initial;
mask-position: revert;
mask-position: revert-layer;
mask-position: unset;

值

一個或多個 <position> 值，以逗號分隔。

<position>

一個、兩個或四個值，表示一個二維位置，指定元素盒子的邊緣。可以給出相對或絕對的偏移量。

描述

mask-position 屬性定義了每個遮罩圖層的位置。一個元素可以應用多個遮罩圖層。圖層的數量由 mask-image 屬性值中以逗號分隔的值的數量決定（即使是 none 值也會建立一個圖層）。

以逗號分隔的值列表中的每個 mask-position 值都會按順序與 mask-image 值列表中定義的相應遮罩圖層進行匹配。如果這兩個屬性中的值的數量不同：

  • 如果 mask-position 的值多於 mask-image，則 mask-position 的多餘值將不被使用。
  • 如果 mask-position 的值少於 mask-image，則 mask-position 的值會重複使用。

每個 mask-position 定義了其關聯的遮罩圖層相對於其關聯的 mask-origin 值的位置。mask-origin 屬性值也類似地與 mask-image 值按順序匹配，多餘的 mask-position 值將被忽略，或者如果 mask-position 值的數量少於 mask-origin 值，則會重複使用。因此，每個遮罩圖層都有一個關聯的 mask-origin 和 mask-position 值。

如果未設定 mask-origin，則其值預設為 padding-box，這意味著每個 mask-position 的原點是元素的內邊距盒子。

單值語法

如果只指定了一個 mask-position 值，則第二個值假定為 center。如果該值是 <length> 或 <percentage>，它定義了遮罩沿水平軸的位置，而遮罩在原點盒子內垂直居中。例如，mask-position: 0%; 等同於 mask-position: 0% center。

如果你使用單個關鍵字進行定位，另一個值將解析為 center。mask-position 的預設值是 0% 0%，這等同於 mask-position: top left。然而：

  • mask-position: top; 等同於 mask-position: top center;。
  • mask-position: left; 等同於 mask-position: center left。
  • mask-position: center; 等同於 mask-position: center center。

如果該值是 <length> 值，它表示從遮罩定位區域的左邊緣開始的水平位置偏移量。正值表示從盒子容器左邊緣向內的偏移。可以使用負值將位置設定在元素盒子之外——這會建立一個向外的偏移，將專案放置在容器左邊緣之外。

百分比值

<percentage> 值表示遮罩相對於容器寬度的水平位置值，該位置相對於左邊緣。然而，這個偏移量不是從遮罩邊緣到盒子邊緣的距離。相反，遮罩影像的尺寸會從容器的尺寸中減去，然後將結果值的百分比用作從盒子左邊緣開始的直接偏移量，這與 background-position 的百分比值相同。

公式是：

（容器尺寸 - 遮罩尺寸） * 位置百分比 = 尺寸偏移值

給定一個 100px 寬的遮罩和一個 1000px 寬的原點盒子，設定 mask-position: 10%;（等同於 10% 50%）會使遮罩在距離左邊緣 90px 的位置垂直居中。公式是 (1000 - 100) * 10% = 90。如果左偏移量是 0%，遮罩的左邊緣將與容器的左邊緣齊平（(1000 - 100) * 0% = 0）。

如果左偏移量是 100%，遮罩的右邊緣將與容器的右邊緣齊平，因為 100px 寬的遮罩的左邊緣將距離容器左邊緣 900px（(1000 - 100) * 100% = 900）（100px 的遮罩寬度加上 900px 的左邊緣距離意味著右邊緣距離左邊緣 1000px，也就是容器的右邊緣）。

雙值語法

一個雙值 <position> 指定了遮罩影像在其遮罩定位區域內的位置，長度和百分比值指定了相對於該區域左邊和上邊的偏移量。

如果兩個值是 <length> 值、<percentage> 值或關鍵字 center，則第一個值表示從遮罩定位區域左邊緣開始的水平位置偏移，第二個值表示從其上邊緣開始的垂直位置偏移，其中百分比是根據遮罩在該維度上的尺寸進行偏移的。

此外，如果指定了 <percentage> 值，第一個值也是相對於左邊緣的水平位置值，第二個值也是相對於上邊緣的垂直位置值。

一對特定於軸的關鍵字可以重新排序，一個特定於軸的關鍵字和長度或百分比也可以重新排序，但兩個長度或百分比值是不可互換的。如果兩個值中有一個是 top、right、bottom 或 left，則這兩個值的順序無關緊要。值對中的任何 center 或 <length-percentage> 值將應用於另一個維度。

四值語法

四值語法由兩對值組成，每對包含一個指定偏移邊緣的關鍵字，以及一個指定偏移距離的 <length> 或 <percentage> 值。例如，mask-position: left 1em top 2em 指定了從左盒子邊緣開始 1em 的水平偏移和從上邊緣開始 2em 的垂直偏移。其等效的雙值語法是 mask-position: 1em 2em。

因為在使用四值語法時我們定義了偏移的邊緣，所以順序並不重要：mask-position: top 2em left 1em 和 mask-position: left 1em top 2em 都會產生相同的結果。

四值語法的真正強大之處在於它允許我們指定除 left 和 top 之外的偏移邊緣。例如，mask-position: bottom 10px right 20px 建立了一個從下邊緣向上 10px 的垂直偏移和一個從右邊緣向左 20px 的水平偏移。通常，四值語法用於從下和/或右邊緣進行偏移。但如果你記不住雙值語法的偏移邊緣順序，這個語法也很有幫助。

需要注意的一點是，與 background-position 的 <bg-position> 資料型別值不同，mask-position 的 <position> 值不允許三值語法，也不允許從 center 進行偏移。當從 bottom 或 right 偏移遮罩時，mask-position 需要宣告所有四個值。

要使四值語法有效，它需要指定 top 或 bottom 作為垂直偏移邊緣，以及垂直的長度或百分比偏移值，並指定 left 或 right 作為水平偏移邊緣，以及水平的長度或百分比偏移值。

正式定義

初始值0% 0%
應用於所有元素；在 SVG 中，它適用於除 <defs> 元素外的容器元素以及所有圖形元素
繼承性否
百分比指遮罩繪製區域的大小減去遮罩圖層影像的大小（參見 background-position 的文字）
計算值由兩個表示原點的關鍵字和兩個相對於該原點的偏移量組成，每個偏移量都以絕對長度（如果給定 <length>）或百分比形式給出。
動畫型別一個可重複的列表

正式語法

mask-position = 
  <position>#  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本用法

html
<section>
  <div></div>
</section>
css
section {
  border: 1px solid black;
  width: 250px;
  height: 250px;
}

div {
  width: 250px;
  height: 250px;
  margin-bottom: 10px;
  background: blue linear-gradient(red, blue);

  mask-image: url("/shared-assets/images/examples/mask-star.svg");
  mask-repeat: no-repeat;
  mask-position: top right;
}

規範

規範
CSS 蒙版模組 Level 1
# the-mask-position

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.