CSS mask-size 屬性

定義和用法

mask-size 屬性指定遮罩層圖像的大小。

實例

例子 1

設置遮罩層圖像的大小（以百分比計）：

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

親自試一試

例子 2

設置遮罩層圖像的大小（以像素計）：

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

親自試一試

CSS 語法

mask-size: auto|size|contain|cover|initial|inherit;

屬性值

值 描述
auto 默認值。
size 指定遮罩圖像的大小，可以使用 px、em 等單位，或者使用 %。
contain 縮放遮罩圖像，使其寬度和高度都能適應容器內部。
cover 縮放遮罩圖像，使其寬度和高度都能覆蓋容器。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

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

瀏覽器支持

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

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-position 屬性

參考：CSS mask-repeat 屬性

參考：CSS mask-type 屬性