Mặt nạ-hình ảnh - Thủ thuật CSS

A masktrong CSS ẩn một phần của phần tử được áp dụng cho.

.el ( mask-image: url(star.svg); )

Giả sử bạn có một phần tử với nền ảnh và đồ họa SVG đen trắng để sử dụng làm mặt nạ, như sau:

Bạn có thể đặt hình ảnh là một background-imagevà mặt nạ là một mask-imagetrên cùng một phần tử và nhận được một cái gì đó như sau:

Mặt nạ có rất nhiều điểm chung với nền ở chỗ bạn có thể định kích thước, định vị chúng và lặp lại chúng và tương tự như nền. Xem các thuộc tính liên quan bên dưới. Nhưng đây là một điều thú vị khác về mặt nạ mà chúng chia sẻ với nền: chúng có thể là gradient.

Đây là hình nền tương tự, chỉ với một linear-gradientchiếc mặt nạ che nó, làm cho phần trên trong suốt mờ đi phần dưới không trong suốt chút nào:

Điều đó hoạt động bởi vì đầu của linear-gradientlà transparent. Tôi đã có thể cho rằng nó sẽ làm việc nếu nó whitecũng như dài như mask-typeđã luminance, nhưng điều đó dường như không làm việc trong bất kỳ trình duyệt đối với tôi.

Nói về luminancemặt nạ, điều đó dường như không hiệu quả đối với hình ảnh dưới dạng mặt nạ có định dạng raster như JPG.webp hoặc PNG đối với tôi. Cập nhật : Độc giả Micheal Hall viết bằng một bản demo trong đó nó có thể liên quan đến việc sử dụng thuộc tính tay dài. Firefox dường như hỗ trợ khái niệm này nếu bạn chỉ sử dụng tốc ký.

Nhưng mặt nạ alpha dường như hoạt động tốt. Như trong đồ họa raster sử dụng độ trong suốt alpha thực tế. Như thế này:

Và chỉ để chứng minh một điểm, một hoạt ảnh màu bạn có thể nhìn thấy qua mặt nạ:

Các mask-imagebất động sản cũng có thể được sử dụng trực tiếp bên trong các yếu tố SVG. Giống như kiểm tra mặt nạ hình elip này cũng có bộ lọc mờ:

Có vẻ như bạn có thể lấy mặt nạ SVG đó và áp dụng nó cho các phần tử khác với mask-image: url(#mask);nhưng tôi không thấy điều đó thực sự hoạt động. Nó chỉ hoạt động trong SVG và có tác dụng phụ khó chịu là xóa hoàn toàn hình ảnh nếu được sử dụng bên ngoài SVG.