Thuộc tính mask-position

Thuộc tính mask-position thiết lập vị trí ban đầu của mặt nạ so với phần tử. Hoạt động tương tự background-position, nhưng áp dụng cho mặt nạ.

Cú pháp

cssbộ chọn {
  mask-position: <vị trí>;
}

Giá trị

Ví dụ . Căn giữa mặt nạ

Mặt nạ hình trái tim ở giữa hình ảnh:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ví dụ . Góc trên bên trái

Mặt nạ ở góc trên bên trái:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: left top;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ví dụ . Góc dưới bên phải

Mặt nạ ở góc dưới bên phải:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: right bottom;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ví dụ . Tọa độ chính xác

Mặt nạ được định vị theo tọa độ chính xác:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 100px 200px;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Ví dụ . Định vị theo phần trăm

Định vị mặt nạ bằng phần trăm:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: 30% 70%;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

Xem thêm