Kẹp mặt nạ - Thủ thuật CSS

Các mask-clipthuộc tính CSS là một phần của 1 đặc điểm kỹ thuật CSS Masking Mô-đun Level, và thiết lập các khu vực vẽ mặt nạ. Nó thực sự cắt vùng nền của một phần tử và xác định vùng nào hiển thị qua mặt nạ: đường viền, phần đệm hoặc hộp nội dung. Nó giống như việc đặt khung lên một bức ảnh, chỉ hiển thị những phần của bức ảnh không bị khung che mất. Chỉ, trong trường hợp này, chúng tôi đang thiết lập những gì được cắt bớt bằng cách sử dụng các giá trị Mô hình Hộp CSS.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Điều này hoạt động giống như thuộc background-cliptính, ngoại trừ nó có ba giá trị bổ sung áp dụng cho các phần tử SVG. Trong bản trình diễn sau, bạn có thể thay đổi vùng vẽ mặt nạ bằng cách sử dụng thuộc tính này. Có cùng một hình ảnh bên dưới để hiển thị hiệu ứng che lấp tốt hơn và đánh dấu các khu vực đường viền và đệm:

Cú pháp

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip 

• Giá trị ban đầu: border-box
• Á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.
• Kế thừa: không
• Loại hoạt ảnh: rời rạc

Giá trị

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset; 

• border-box: Nội dung đã vẽ được cắt bớt vào ô viền. (Giá trị mặc định)
• content-box: Nội dung sơn được cắt bớt vào hộp nội dung.
• fill-box: Nội dung được vẽ được cắt vào hộp giới hạn đối tượng.
• margin-box: Nội dung sơn được cắt bớt vào ô lề.
• padding-box: Nội dung đã sơn được cắt bớt vào ô đệm.
• stroke-box: Nội dung đã vẽ được cắt vào hộp giới hạn nét vẽ.
• view-box: Sử dụng khung xem SVG gần nhất làm hộp tham chiếu. Nếu một viewBoxthuộc tính được chỉ định cho phần tử tạo chế độ xem SVG:
  • Hộp tham chiếu được đặt tại điểm gốc của hệ tọa độ được thiết lập bởi viewBoxthuộc tính.
  • Kích thước của hộp tham chiếu được đặt thành các giá trị widthvà thuộc tính.heightviewBox
    
• no-clip: Nội dung sơn không bị cắt bớt.
  
• initial: Áp dụng cài đặt mặc định của thuộc tính, đó là border-box.
• inherit: Thông qua mask-clipgiá trị của cha mẹ.
• unset: Loại bỏ dòng điện mask-clipkhỏi phần tử.

Ghi chú

• Đối với các phần tử SVG không có hộp bố cục CSS được liên kết, các giá trị content-box, padding-boxtính toán cho fill-boxvà cho border-boxvà margin-boxtính toán cho stroke-box.
• Đối với các yếu tố với hộp CSS bố trí liên quan, các giá trị fill-boxtính toán đến content-boxvà cho stroke-boxvà view-boxtính toán với giá trị ban đầu của mask-cliplà border-box.

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 clip 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ùng vẽ mặt nạ của hình ảnh đầu tiên, giá trị thứ hai chỉ định vùng vẽ mặt nạ của hình ảnh thứ hai, v.v.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Bản giới thiệu

Hỗ trợ trình duyệt

I E	Cạnh	Firefox	Trình duyệt Chrome	Safari	Opera
Không	79+	53+	Tất cả	4+	15+

Chrome dành cho Android	Android Firefox	Trình duyệt Android	iOS Safari	Opera Mobile
Tất cả	Tất cả	Tất cả	Tất cả	59+

Thêm thông tin

Bài báo ngày 06/11/2016

Cắt và tạo mặt nạ trong CSS

Mojtaba Seyedi