Trong CSS, thuộc mask-positiontính chỉ định vị trí ban đầu của hình ảnh lớp mặt nạ so với vùng vị trí mặt nạ. Nó hoạt động giống như background-positiontài sản.
.element ( mask-image: url("star.svg"); mask-position: 20px center; )Tạo mặt nạ cho phép bạn hiển thị các phần đã chọn của một phần tử trong khi ẩn phần còn lại. Trong bản trình diễn sau, bạn có thể thay đổi vị trí của hình ảnh lớp mặt nạ:
Cú pháp
mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )- Giá trị ban đầu:
0% 0% - Áp dụng cho: tất cả các phần tử. Trong SVG, nó áp dụng cho các phần tử vùng chứa ngoại trừ
phần tử, tất cả các phần tử đồ họa vàphần tử. - Kế thừa: không
- Giá trị được tính toán: bao gồm: hai từ khóa đại diện cho điểm xuất phát và hai hiệu số từ điểm gốc đó, mỗi từ khóa được cho dưới dạng độ dài tuyệt đối (nếu cho trước a
), nếu không thì dưới dạng phần trăm. - Loại hoạt ảnh: danh sách có thể lặp lại
Giá trị
Một có thể được xác định theo các từ khóa bù đắp ( top, left, bottom, right, và center), tỷ lệ phần trăm, và các giá trị chiều dài liên quan đến các cạnh của phần tử, tương tự như CSS background-positiontài sản.
/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center;
/* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh;
/* Percentage values */ mask-position: 25% 50%;
/* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;Định nghĩa giá trị
: Bất kỳ giá trị chiều dài CSS (ví dụ nhưpx,em,remvà%, trong số những người khác) mà sẽ chỉ định cách xa mép của hình ảnh mặt nạ là từ mép tương ứng của phần tử.: Chỉ định vị trí của hình ảnh lớp mặt nạ dưới dạng giá trị phần trăm so với vùng định vị mặt nạ trừ đi kích thước của hình ảnh mặt nạ.top: Tương đương với 0% cho vị trí thẳng đứng.right: Tương đương với 100% cho vị trí nằm ngang.bottom: Tương đương với 100% cho vị trí thẳng đứng.left: Tương đương với 0% cho vị trí nằm ngang.center: Tương đương với 50% cho vị trí ngang nếu vị trí ngang không được chỉ định khác hoặc 50% cho vị trí dọc, nếu có.initial: Áp dụng cài đặt mặc định của thuộc tính, là 0% 0%.inherit: Thông quamask-positiongiá trị của cha mẹ.unset: Loại bỏ dòng điệnmask-positionkhỏi phần tử.
Sử dụng nhiều giá trị
Thuộc tính này có thể nhận một danh sách các giá trị được phân tách bằng dấu phẩy cho các vị trí mặt nạ và mỗi giá trị được áp dụng cho một hình ảnh lớp mặt nạ tương ứng được chỉ định trong thuộc mask-imagetính. Trong ví dụ sau, giá trị đầu tiên chỉ định vị trí của hình ảnh đầu tiên, giá trị thứ hai chỉ định vị trí của hình ảnh thứ hai, v.v.
.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )Cú pháp khác nhau
mask-position có thể nhận một, hai, ba hoặc bốn giá trị để chỉ định vị trí của lớp mặt nạ theo chiều ngang và chiều dọc.
Giá trị đơn
Trong trường hợp một giá trị được đặt, giá trị đó được coi là giá trị ngang và giá trị dọc được coi là giá trị center.
mask-position: 100px; /* 100px center */Hai giá trị
Trong trường hợp sử dụng giá trị cặp, giá trị đầu tiên được lấy làm giá trị ngang và giá trị thứ hai chỉ định vị trí của lớp tạo theo chiều dọc.
mask-position: 10% 50%; /* x=10%, Y=50% */Nếu cả hai giá trị đều là từ khóa, thì thứ tự của các từ khóa không có liên quan:
mask-position: top left; /* = left top */Nhưng khi chúng ta có sự kết hợp giữa từ khóa và độ dài hoặc tỷ lệ phần trăm, thứ tự sẽ quan trọng và giá trị đầu tiên luôn tương ứng với phần bù ngang. Vì thế:
mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */Ba giá trị
Nếu ba giá trị được đưa ra, phần bù bị thiếu được giả định là 0:
mask-position: left 100px bottom; /* left=100px bottom=0 */Bốn giá trị
Cú pháp bốn giá trị cho phép bạn chỉ định các cạnh của phần tử mà bạn đang định vị mặt nạ liên quan đến (giá trị 1 và 3), sau đó là khoảng cách từ các cạnh đó (giá trị 2 và 4).
Vì vậy, nếu bạn muốn định vị mặt nạ 100px từ dưới cùng của phần tử và 200px từ bên phải, bạn có thể thực hiện như sau:
mask-position: bottom 100px right 200px;Mặt nạ hoạt hình
Có thể tạo hoạt ảnh cho vị trí mặt nạ và mask-sizesử dụng hoạt ảnh khung hình chính và chuyển tiếp CSS, như sau:
.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; )
.element:hover ( mask-position: right 10px bottom 10px; )Trong bản trình diễn tiếp theo này, chúng ta đang tạo hiệu ứng cho vị trí của lớp mặt nạ bằng cách sử dụng hoạt ảnh khung hình chính:
Bản giới thiệu
Thay đổi giá trị cho mask-positiontrong bản trình diễn sau:
Hỗ trợ trình duyệt
| I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Không | 18+ | 53+ | 4+ | 3.2+ | 15+ |
| Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 2.1+ | 3.2+ | 59+ |
Thêm thông tin
- Mô-đun tạo mặt nạ CSS cấp độ 1 (Bản thảo của người biên tập)
- Cắt và tạo mặt nạ trong CSS
- Clipping vs. Masking: Khi nào thì sử dụng
- # 185: Chơi với Mặt nạ CSS (video)