Kích thước mặt nạ - Thủ thuật CSS

Anonim

Trong CSS, thuộc tính mask-size chỉ định kích thước của hình ảnh lớp mặt nạ. Theo nhiều cách, nó hoạt động rất giống background-sizetài sản.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Tạo mặt nạ cho phép bạn hiển thị các phần đã chọn của một phần tử trong khi ẩn phần còn lại. Kích thước của mặt nạ được xác định bởi thuộc mask-sizetính.

Trong bản demo sau, bạn có thể thử với kích thước của hình ảnh lớp mặt nạ:

Cú pháp

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Giá trị ban đầu: auto
  • Á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 và phần tử
  • Kế thừa: không
  • Loại hoạt ảnh: danh sách có thể lặp lại

Về cơ bản, điều đó nói rằng cú pháp chấp nhận giá trị kích thước nền ( ) có thể là một hoặc hai độ dài và / hoặc phần trăm ( ), được đặt thành autohoặc một trong hai từ khóa ( covervà contain).

  • Khi hai giá trị được sử dụng, giá trị đầu tiên chỉ định chiều rộng của hình ảnh mặt nạ và giá trị thứ hai chỉ định chiều cao của nó .
  • Khi một giá trị không chứa hoặc không che được sử dụng, nó xác định chiều rộng của hình ảnh mặt nạ và chiều cao được giả định là auto.

Giá trị

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Định nghĩa giá trị

  • : Bất kỳ hợp lệ và không âm dài CSS, chẳng hạn như px, em, remvà %, trong số những người khác.
  • : Chỉ định kích thước của hình ảnh lớp mặt nạ dưới dạng giá trị phần trăm so với vùng định vị mặt nạ, được đặt bởi giá trị của mask-origin. Theo mặc định, giá trị này là border-box, nghĩa là nó chứa đường viền, phần đệm và nội dung của hộp.
  • auto: Chiều cao và chiều rộng nội tại của hình ảnh mặt nạ được sử dụng và đối với những hình ảnh như gradient không có kích thước nội tại, nó được hiển thị ở kích thước của vùng định vị mặt nạ.
  • contain: Cân hình ảnh mặt nạ trong khi vẫn giữ nguyên tỷ lệ nội tại của nó theo cách mà cả chiều rộng và chiều cao của nó đều có thể vừa với bên trong vùng định vị mặt nạ. Đối với những hình ảnh như gradient không có kích thước nội tại, nó được hiển thị ở kích thước của vùng định vị mặt nạ.
  • cover: Cân hình ảnh mặt nạ trong khi vẫn giữ nguyên tỷ lệ nội tại của nó theo cách mà cả chiều rộng và chiều cao của nó có thể bao phủ hoàn toàn vùng định vị mặt nạ. Đối với những hình ảnh như gradient không có kích thước nội tại, nó được hiển thị ở kích thước của vùng định vị mặt nạ.
  • initial: Áp dụng cài đặt mặc định của thuộc tính, đó là auto.
  • inherit: Thông qua giá trị kích thước mặt nạ của cha mẹ.
  • unset: Loại bỏ dòng điện mask-sizekhỏi phần tử.

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 kích thước 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 kích thước của hình ảnh đầu tiên, giá trị thứ hai chỉ định kích thước 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-size: 100px 100%, auto, contain; )

các autogiá trị

Nếu giá trị của thuộc mask-sizetính được chỉ định autonhư sau:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Thì hình ảnh mặt nạ sẽ thay đổi tỷ lệ theo các hướng tương ứng để duy trì tỷ lệ co của nó. Điều đó nói rằng, chúng ta có thể nhận được nhiều kết quả khác nhau tùy thuộc vào kích thước và tỷ lệ nội tại của hình ảnh.

Tỷ lệ / Thứ nguyên Không có kích thước nội tại Một chiều nội tại Cả hai chiều nội tại
Có tỷ lệ Được hiển thị như thể chứa đã được chỉ định thay thế Được hiển thị ở kích thước được xác định bởi một thứ nguyên đó và tỷ lệ Được hiển thị ở kích thước đó
Không có tỷ lệ Được hiển thị ở kích thước của vùng định vị mặt nạ Được hiển thị bằng cách sử dụng kích thước nội tại và kích thước tương ứng của vùng định vị mặt nạ N / A

Nếu giá trị của mask-sizeđược chỉ định bằng autovà một giá trị không phải tự động khác như sau:

.element ( mask-size: auto 200px; )

… sau đó:

  • nếu hình ảnh có tỷ lệ nội tại , giá trị tự động sẽ được tính bằng cách sử dụng kích thước được chỉ định và tỷ lệ nội tại.
  • nếu hình ảnh không có tỷ lệ nội tại , giá trị tự động sẽ trở thành kích thước nội tại tương ứng của hình ảnh nếu nó tồn tại và nếu không, tự động sẽ là kích thước tương ứng của vùng định vị mặt nạ.

Hiểu covervàcontain

Video sau đây giải thích cách hoạt động của từ khóa chứa và từ khóa bao gồm. Lưu ý rằng vị trí ban đầu của lớp mặt nạ là ở tâm của vùng định vị:

Nếu hình ảnh không có tỷ lệ khung hình nội tại, thì việc chỉ định bìa hoặc chứa sẽ hiển thị hình ảnh mặt nạ ở kích thước của vùng định vị mặt nạ.

Và chỉ cái quái gì là kích thước nội tại và tỷ lệ nội tại?

Kích thước bên trong là chiều rộng và chiều cao của một phần tử và tỷ lệ nội tại là tỷ lệ của chúng.

  • Hình ảnh bitmap giống như định dạng PNG, luôn có kích thước nội tại và tỷ lệ nội tại.
  • Một hình ảnh vectơ như định dạng SVG, có thể có cả hai kích thước nội tại. Do đó, nó cũng có tỷ trọng nội tại. Nó cũng có thể có một hoặc không có kích thước nội tại và trong cả hai trường hợp, nó có thể có hoặc không có tỷ lệ nội tại.
  • Gradients giống như hình ảnh không có kích thước nội tại hoặc tỷ lệ nội tại.

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
Không 18+ 53+ Tất cả 4+ 70
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
85+ 79+ 4.4+ Tất cả Tất cả
Nguồn: caniuse

Bản giới thiệu

Bản trình diễn sau sử dụng độ dài cho kích thước mặt nạ. Hãy thử thay đổi giá trị thành các loại giá trị khác trong mã và kiểm tra kết quả.

Thêm thông tin

  • Mô-đun tạo mặt nạ CSS cấp độ 1
  • Cắt và tạo mặt nạ trong CSS
  • Clipping vs. Masking: Khi nào thì sử dụng
  • # 185: Chơi với Mặt nạ CSS (video)