Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
Ta đã đề cập đến việc sử dụng thuộc tính clip-path để cắt bằng CSS, vì vậy việc tạo mặt nạ là điều đương nhiên. Trái ngược với clipping, trong đó một phần của hình ảnh hoặc phần tử hoàn toàn không nhìn thấy hoặc hoàn toàn có thể nhìn thấy, với tính năng che, ta có thể ẩn hoặc hiện các phần của hình ảnh với các mức độ mờ khác nhau.
Tạo mặt nạ trong CSS được thực hiện bằng cách sử dụng thuộc tính mask-image và một hình ảnh phải được cung cấp làm mặt nạ. Mọi thứ có màu đen 100% trong mặt nạ hình ảnh có thể nhìn thấy hoàn toàn, mọi thứ trong suốt 100% sẽ bị ẩn hoàn toàn và bất kỳ thứ gì ở giữa sẽ che một phần hình ảnh. Các gradient tuyến tính và xuyên tâm trong CSS là các hình ảnh được tạo, vì vậy chúng được dùng làm mặt nạ hình ảnh. SVGs sử dụng phần tử mặt nạ cũng được dùng làm mặt nạ hình ảnh. Hãy xem xét 3 khả năng cho mặt nạ hình ảnh với các ví dụ cụ thể:
Tạo mặt nạ bằng Gradients
Đầu tiên hãy sử dụng một gradient tuyến tính đơn giản chuyển từ trong suốt sang màu đen. Hình ảnh đầu tiên là hình ảnh bắt đầu mặc định của ta và hình ảnh thứ hai có áp dụng gradient tuyến tính của ta làm giá trị hình ảnh mặt nạ :
Đây là các luật CSS được sử dụng ở đây:
.mask1 { -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 75%); mask-image: linear-gradient(to bottom, transparent 25%, black 75%); } Dưới đây là hai ví dụ khác về các hiệu ứng thú vị có thể được thực hiện với việc tạo mặt nạ bằng cách sử dụng gradient:
Và các luật CSS cho 2 mặt nạ gradient này:
.mask2 { -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%); mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%); } .mask3 { -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%); mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%); } Tạo mặt nạ bằng hình ảnh
Đây là ta đang sử dụng một hình ảnh được tạo bằng Sketch làm mặt nạ hình ảnh của ta . Hình ảnh đầu tiên là mặt nạ hình ảnh chính nó và hình ảnh thứ hai có mặt nạ đó được áp dụng cho nó:
Và CSS của ta trông như thế này:
.mask4 { -webkit-mask-image: url("/path/to/image-mask.png"); mask-image: url("/path/to/image-mask.png"); -webkit-mask-size: 400px 600px; mask-size: 400px 600px; } Ta đã chỉ định một giá trị cho kích thước mặt nạ ở đây vì mặt nạ hình ảnh của ta là 800px x 1200px , nhưng ở đây ta muốn mọi thứ được thu nhỏ một nửa để hình ảnh có thể trông sắc nét trên màn hình võng mạc.
Tạo mặt nạ bằng mặt nạ SVG
Cuối cùng, nếu SVG là rãnh của bạn, bạn có thể xác định mặt nạ hình ảnh bằng cách sử dụng phần tử mặt nạ SVG.
Ví dụ đầu tiên hiện dường như chỉ hoạt động trong Firefox ( có thể bạn sẽ không thấy bất cứ điều gì trong các trình duyệt không hỗ trợ ). Nó xác định mặt nạ SVG và sau đó ta tham chiếu ID của mặt nạ trong CSS như bình thường. Ví dụ thứ hai dường như có hỗ trợ rộng hơn và xác định hình ảnh là một phần của chính phần tử SVG.
Cũng lưu ý với mặt nạ SVG, màu sắc được sử dụng là trắng và đen thay vì trong suốt và đen. Màu sắc cũng hoạt động ngược lại và màu trắng / trắng một phần là những gì sẽ được hiển thị.
Xem Bút mdPBExv của alligatorio ( @alligatorio ) trên CodePen .
Ví dụ 1 (tam giác)
Đây là đánh dấu SVG cho ví dụ đầu tiên:
<svg width="0" height="0" viewBox="0 0 400 600"> <defs> <mask id="my-svg-mask"> <rect fill="#000000" x="0" y="0" width="400" height="600"></rect> <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon> </mask> </defs> </svg> Sau đó, ta có thể áp dụng mặt nạ cho hình ảnh của bạn với hình ảnh mặt nạ như bình thường bằng cách tham chiếu lại ID của mặt nạ SVG:
.mask5 { -webkit-mask-image: url(#my-svg-mask); mask-image: url(#my-svg-mask); } Ví dụ 2 (bong bóng)
Đối với ví dụ SVG thứ hai của ta , mọi thứ được chứa trong định nghĩa SVG, bao gồm cả hình ảnh chính của ta :
<svg width="400px" height="600px" viewBox="0 0 400 600"> <defs> <mask id="my-svg-mask2"> <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect> <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle> <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle> <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle> <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle> <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle> <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle> </mask> </defs> <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/css/masking/masking-example1.jpg" width="400" height="600"></image> </svg> Các tin liên quan
Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn2020-09-02
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính
2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01
