CSS mask-position 屬性

定義和用法

mask-position 屬性設置遮罩圖像的起始位置（相對于遮罩位置區域）。

提示：默認情況下，遮罩圖像放置在元素的左上角，并在垂直和水平方向上重復。

實例

例子 1

將遮罩層圖像的位置設置為居中：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

親自試一試

例子 2

將遮罩層圖像的位置設置為右下角：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

親自試一試

CSS 語法

mask-position: value;

屬性值

值 描述
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 如果只指定一個關鍵字，另一個值將為 "center"。
x% y%

第一個值是水平位置，第二個值是垂直位置。

左上角是 0% 0%。右下角是 100% 100%。

如果只指定一個值，另一個值將為 50%。

默認值為：0% 0%
xpos ypos

第一個值是水平位置，第二個值是垂直位置。

左上角是 0 0。單位可以是像素（0px 0px）或任何其他 CSS 單位。

如果只指定一個值，另一個值將為 50%。

可以混合使用 % 和位置。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： 0% 0%
繼承性： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS Masking Module Level 1
JavaScript 語法： object.style.maskPosition="100px center"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
120 120 53 15.4 106

相關頁面

教程：CSS 遮罩

參考：CSS mask 屬性

參考：CSS mask-clip 屬性

參考：CSS mask-composite 屬性

參考：CSS mask-image 屬性

參考：CSS mask-mode 屬性

參考：CSS mask-origin 屬性

參考：CSS mask-repeat 屬性

參考：CSS mask-size 屬性

參考：CSS mask-type 屬性