CSS mask-position 屬性
示例
將蒙層影像的位置設定為居中
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
mask-size: 50%;
mask-repeat: no-repeat;
mask-position: center;
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
mask-position 屬性設定蒙層影像的起始位置（相對於蒙層位置區域）。
提示：預設情況下，蒙層影像放置在元素的左上角，並垂直和水平重複。
| 預設值 | 0% 0% |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS 蒙版模組級別 1 |
| JavaScript 語法 | object.style.maskPosition="100px center" |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| mask-position | 120 | 120 | 53 | 15.4 | 106 |
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 |
更多示例
示例
將蒙層影像的位置設定為右下角
.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 屬性
CSS 參考：mask-clip 屬性
CSS 參考：mask-composite 屬性
CSS 參考：mask-image 屬性
CSS 參考：mask-mode 屬性
CSS 參考：mask-origin 屬性
CSS 參考：mask-repeat 屬性
CSS 參考：mask-size 屬性
CSS 教程：CSS 蒙版
