CSS Đ蔽 hình - mask

Xin chào các nhà vô địch CSS tương lai! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của CSS Đ蔽 hình. Hãy tưởng tượng bạn là một phù thủy, và bạn muốn làm cho một phần của trang web của bạn biến mất hoặc tiết lộ chúng theo những cách thú vị. Đó chính xác là điều mà CSS Đ蔽 hình cho phép chúng ta làm! Vậy, hãy đội mũ phù thủy của mình và học một số chiêu trò CSS nhé!

什么是 CSS Đ蔽 hình?

CSS Đ蔽 hình giống như việc sử dụng một mẫu vô hình trên các yếu tố web của bạn. Nó cho phép bạn ẩn hoặc hiển thị một phần của một yếu tố dựa trên một hình ảnh hoặc hình dạng khác. Đây là một kỹ thuật mạnh mẽ có thể tạo ra một số hiệu ứng thực sự thú vị!

Các giá trị có thể sử dụng

Trước khi chúng ta bắt đầu mã hóa, hãy xem xét các giá trị khác nhau mà chúng ta có thể sử dụng với thuộc tính mask. Hãy nghĩ về chúng như những cây cương pháp thuật khác nhau, mỗi cây tạo ra một hiệu ứng duy nhất:

Giá trị	Mô tả
none	Không có đ蔽 hình được áp dụng
<mask-reference>	Tham chiếu đến một hình ảnh đ蔽 hình
<masking-mode>	Xác định cách đ蔽 hình được áp dụng
<position>	Đặt vị trí của đ蔽 hình
<bg-size>	Định nghĩa kích thước của đ蔽 hình
<repeat-style>	Xác định cách đ蔽 hình lặp lại
<geometry-box>	Định nghĩa hộp đ蔽 hình
no-clip	Ngăn không cho đ蔽 hình bị剪切

Đừng lo lắng nếu chúng có vẻ rối rắm bây giờ. Chúng ta sẽ khám phá từng cái với các ví dụ!

Áp dụng cho

Thuộc tính mask có thể được áp dụng cho bất kỳ yếu tố nào. Nó giống như có một cây cương pháp thuật hoạt động trên mọi thứ!

Cú pháp

Cú pháp cơ bản cho thuộc tính mask trông như thế này:

.element {
  mask: <value>;
}

Bây giờ, hãy xem xét từng giá trị chi tiết.

CSS mask - none Giá trị

Giá trị none rất đơn giản. Nó có nghĩa là không có đ蔽 hình được áp dụng. Nó giống như quyết định không sử dụng cây cương pháp thuật của bạn.

.no-mask {
  mask: none;
}

Mã này đơn giản là nói với trình duyệt, "Đừng áp dụng bất kỳ đ蔽 hình nào cho yếu tố này."

CSS mask - <mask-reference>

Đây là nơi mà phép thuật thực sự bắt đầu! Một <mask-reference> có thể là một hình ảnh hoặc một gradient CSS xác định phần nào của yếu tố nên được hiển thị.

.image-mask {
  mask-image: url('mask.png');
  mask: url('mask.png');
}

.gradient-mask {
  mask-image: linear-gradient(to right, transparent, black);
  mask: linear-gradient(to right, transparent, black);
}

Trong các ví dụ này, chúng ta đang sử dụng hoặc một tệp hình ảnh ('mask.png') hoặc một gradient tuyến tính làm đ蔽 hình. Các phần đen của đ蔽 hình sẽ hiển thị yếu tố, trong khi các phần trong suốt sẽ ẩn nó.

CSS mask - <masking-mode>

Chế độ đ蔽 hình xác định cách đ蔽 hình được áp dụng. Có hai giá trị: alpha và luminance.

.alpha-mask {
  mask-mode: alpha;
}

.luminance-mask {
  mask-mode: luminance;
}

• alpha: Sử dụng kênh alpha của hình ảnh đ蔽 hình.
• luminance: Sử dụng độ sáng của hình ảnh đ蔽 hình.

CSS mask - <position>

Giống như với các hình ảnh nền, bạn có thể đặt vị trí của đ蔽 hình:

.positioned-mask {
  mask-position: center;
  /* hoặc */
  mask: url('mask.png') center;
}

Điều này đặt đ蔽 hình ở giữa yếu tố. Bạn có thể sử dụng bất kỳ giá trị vị trí hợp lệ nào ở đây.

CSS mask - <bg-size>

Bạn cũng có thể kiểm soát kích thước của đ蔽 hình:

.sized-mask {
  mask-size: cover;
  /* hoặc */
  mask: url('mask.png') cover;
}

Điều này làm cho đ蔽 hình bao phủ toàn bộ yếu tố. Bạn có thể sử dụng các kích thước cụ thể, như 100px 200px.

CSS mask - <repeat-style>

Nếu đ蔽 hình của bạn nhỏ hơn yếu tố, bạn có thể kiểm soát cách nó lặp lại:

.repeating-mask {
  mask-repeat: repeat-x;
  /* hoặc */
  mask: url('mask.png') repeat-x;
}

Điều này lặp lại đ蔽 hình theo chiều ngang qua yếu tố.

CSS mask - <geometry-box>

Hộp hình học xác định khu vực mà đ蔽 hình bao phủ:

.box-mask {
  mask-clip: padding-box;
  /* hoặc */
  mask: url('mask.png') padding-box;
}

Điều này áp dụng đ蔽 hình vào hộp padding của yếu tố.

CSS mask - <geometry-box> | no-clip

Giá trị no-clip ngăn không cho đ蔽 hình bị剪切 đến giới hạn của yếu tố:

.no-clip-mask {
  mask-clip: no-clip;
  /* hoặc */
  mask: url('mask.png') no-clip;
}

Điều này cho phép đ蔽 hình mở rộng ra ngoài giới hạn của yếu tố.

CSS mask - Các thuộc tính liên quan

Có một số thuộc tính liên quan đến mask cung cấp cho bạn nhiều kiểm soát hơn:

Thuộc tính	Mô tả
mask-image	Xác định hình ảnh đ蔽 hình
mask-mode	Đặt chế độ đ蔽 hình
mask-repeat	Kiểm soát cách đ蔽 hình lặp lại
mask-position	Đặt vị trí của đ蔽 hình
mask-clip	Xác định khu vực vẽ của đ蔽 hình
mask-origin	Đặt nguồn gốc của đ蔽 hình
mask-size	Xác định kích thước của đ蔽 hình
mask-composite	Định nghĩa cách các đ蔽 hình được kết hợp

Mỗi thuộc tính này tương ứng với một phần của thuộc tính缩写 mask mà chúng ta đã sử dụng.

Và thế là bạn đã học được cơ bản của CSS đ蔽 hình. Nhớ rằng, giống như bất kỳ phép thuật nào, việc thành thạo CSS đ蔽 hình cần phải luyện tập. Vậy đừng ngại thử nghiệm và tạo ra những thiết kế web kỳ diệu của riêng bạn!

Trong những năm dạy học của tôi, tôi đã phát hiện ra rằng cách tốt nhất để học là làm. Vậy đây là một bài tập thú vị cho bạn: thử tạo hiệu ứng "reveal" trên một hình ảnh sử dụng gradient mask. Khi bạn di chuột qua hình ảnh, nó sẽ được tiết lộ hoàn toàn. Điều này giống như kéo zurück một màn để tiết lộ một bức ảnh ẩn!

Chúc các bạn mã hóa vui vẻ, và hy vọng rằng những đ蔽 hình của bạn luôn vừa vặn hoàn hảo!

Credits: Image by storyset