CSS masking

Module CSS masking định nghĩa masking và clipping — hai thao tác đồ họa khác nhau được dùng để ẩn một phần hoặc toàn bộ các phần tử hiển thị.

Clipping liên quan đến việc định nghĩa một vector path, hình dạng hoặc polygon khép kín làm clipping path. Mọi thứ bên trong vùng clipping path vẫn hiển thị trong khi mọi thứ bên ngoài bị ẩn đi, hay còn gọi là "bị cắt". Thuộc tính clip-path chỉ định một <basic-shape> hoặc tham chiếu đến phần tử SVG <clipPath> được dùng làm clipping path.

Các thuộc tính CSS masking được dùng để áp dụng mask cho một phần tử hoặc border của nó. Một đối tượng đồ họa sau đó được vẽ lên nền hoặc border, che hoàn toàn hoặc một phần của phần tử hoặc border của nó, tùy thuộc vào opacity hoặc luminance của mask.

Hình ảnh được dùng làm mask được chỉ định bởi thuộc tính mask-image hoặc mask-border-source. Mask được chỉ định có thể là <image>, <gradient> hoặc phần tử SVG <mask>. Mask có thể được đặt kích thước và định vị tương tự như hình ảnh nền và border.

Clipping và masking trong CSS hoạt động theo cùng cách như trong SVG: Đầu tiên, phần tử được tạo kiểu mà không có filter effects, masking, clipping và opacity. Sau đó, bất kỳ hiệu ứng nào sẽ được áp dụng cho phần tử theo thứ tự sau: filter effects, clipping, masking và opacity.

Trong khi masking cung cấp nhiều kiểm soát và tùy chọn hơn, clipping có thể hoạt động tốt hơn nếu chỉ cần một basic shape — chúng dễ interpolate hơn.