Thuộc tính mask-position CSS

Trang trước mask-origin
Trang tiếp theo mask-repeat

Định nghĩa và cách sử dụng

mask-position Thuộc tính này thiết lập vị trí bắt đầu của hình ảnh che mờ (so với vùng vị trí che mờ).

Lưu ý:Mặc định, hình ảnh che mờ được đặt ở góc trên cùng bên trái của phần tử và được lặp lại theo hướng ngang và dọc.

Thực例

Ví dụ 1

Đặt vị trí của hình ảnh che mờ ở giữa:

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

Thử ngay

Ví dụ 2

Đặt vị trí của hình ảnh che mờ ở góc dưới cùng bên phải:

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

Thử ngay

Ngôn ngữ CSS

mask-position: value;

Giá trị thuộc tính

Giá trị	Mô tả
left top left center left bottom right top right center right bottom center top center center center bottom	Nếu chỉ chỉ định một từ khóa, giá trị còn lại sẽ là "center".
x% y%	Giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc. Góc trên cùng bên trái là 0% 0%. Góc dưới cùng bên phải là 100% 100%. Nếu chỉ chỉ định một giá trị, giá trị còn lại sẽ là 50%. Giá trị mặc định là: 0% 0%
xpos ypos	Giá trị đầu tiên là vị trí ngang, giá trị thứ hai là vị trí dọc. Góc trên cùng bên trái là 0 0. Đơn vị có thể là pixel (0px 0px) hoặc bất kỳ đơn vị CSS nào khác. Nếu chỉ chỉ định một giá trị, giá trị còn lại sẽ là 50%. Có thể kết hợp % và vị trí.
initial	Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit	Ghi đè thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định:	0% 0%
Kế thừa:	Không
Chế tạo animation:	Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản:	Mô-đun Masking CSS Level 1
Ngôn ngữ lập trình JavaScript:	object.style.maskPosition="100px center"