mask-origin

Cú pháp

/* Giá trị từ khóa */
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/* Nhiều giá trị */
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/* Giá trị toàn cục */
mask-origin: inherit;
mask-origin: initial;
mask-origin: revert;
mask-origin: revert-layer;
mask-origin: unset;

Giá trị

Thuộc tính mask-origin là danh sách các giá trị từ khóa <coord-box> được phân tách bằng dấu phẩy, bao gồm:

content-box

Vị trí tương đối với hộp nội dung.

padding-box

Vị trí tương đối với hộp đệm.

border-box

Vị trí tương đối với hộp viền.

fill-box

Vị trí tương đối với hộp giới hạn đối tượng.

stroke-box

Vị trí tương đối với hộp giới hạn nét vẽ.

view-box

Sử dụng khung nhìn SVG gần nhất làm hộp tham chiếu. Nếu một thuộc tính viewBox được chỉ định cho phần tử tạo ra khung nhìn SVG, hộp tham chiếu được định vị tại gốc của hệ tọa độ được thiết lập bởi thuộc tính viewBox và kích thước của hộp tham chiếu được đặt bằng các giá trị chiều rộng và chiều cao của thuộc tính viewBox.

Có ba giá trị không chuẩn là viết tắt cho các giá trị <coord-box> chuẩn: content là bí danh cho content-box, padding là bí danh cho padding-box, và border là bí danh cho border-box.

Mô tả

Thuộc tính mask-origin rất giống với thuộc tính background-origin, nhưng nó có một tập hợp giá trị khác và giá trị ban đầu khác. Giá trị ban đầu phụ thuộc vào việc có hộp bố cục CSS liên quan hay không; nếu có, giá trị mặc định là border-box. Trong khi đó, mặc định cho background-origin là padding-box.

Đối với các phần tử SVG không có hộp bố cục CSS liên quan, các giá trị content-box, padding-box, và border-box (giá trị mặc định) tính toán thành fill-box, nghĩa là vị trí tương đối với hộp giới hạn đối tượng. Đối với các phần tử HTML, nếu một giá trị liên quan đến SVG là fill-box, stroke-box, hoặc view-box được đặt, giá trị được tính toán thành border-box.

Một phần tử có thể có nhiều lớp mặt nạ được áp dụng. Số lượng lớp được xác định bởi số lượng giá trị được phân tách bằng dấu phẩy trong giá trị thuộc tính mask-image (ngay cả khi một hoặc nhiều giá trị đó là none). Mỗi giá trị mask-origin trong danh sách giá trị được phân tách bằng dấu phẩy được khớp với giá trị mask-image được phân tách bằng dấu phẩy, theo cùng thứ tự.

Nếu số lượng giá trị trong hai thuộc tính khác nhau, bất kỳ giá trị dư thừa nào của mask-origin sẽ không được sử dụng trong trường hợp mask-origin có nhiều giá trị hơn mask-image. Nếu mask-origin có ít giá trị hơn mask-image, các giá trị mask-origin sẽ được lặp lại.

Đối với các phần tử được hiển thị dưới dạng một hộp đơn, thuộc tính này chỉ định vùng định vị mặt nạ — hay vị trí gốc — của hình ảnh được tham chiếu bởi thuộc tính mask-image.

Đối với các phần tử được hiển thị dưới dạng nhiều hộp, chẳng hạn như các hộp nội tuyến trải dài hơn một dòng, thuộc tính mask-origin chỉ định các hộp mà thuộc tính box-decoration-break hoạt động để xác định vùng định vị mặt nạ.

mask-origin có thể làm cho hình ảnh lớp mặt nạ bị cắt. Ví dụ, nếu thuộc tính mask-clip được đặt thành padding-box, mask-origin được đặt thành border-box, mask-position được đặt thành cạnh top left, và phần tử có viền, thì hình ảnh lớp mặt nạ sẽ bị cắt ở cạnh trên-trái.

Định nghĩa hình thức

Cú pháp hình thức

mask-origin = 
  <coord-box>#  

<coord-box> = 
  <paint-box>  |
  view-box     

<paint-box> = 
  <visual-box>  |
  fill-box      |
  stroke-box    

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

Ví dụ

So sánh content, padding và border

Ví dụ này minh họa cách dùng cơ bản khi so sánh ba giá trị của thuộc tính mask-origin.

HTML

Chúng ta gồm bốn phần tử <section>, mỗi phần tử chứa một phần tử <div>.

<section class="content">
  <div></div>
</section>
<section class="padding">
  <div></div>
</section>
<section class="border">
  <div></div>
</section>
<section class="comparison">
  <div></div>
</section>

CSS

Chúng ta áp dụng border, padding, và margin cho mỗi <div>. Chúng tạo ra các điểm tham chiếu cho gốc hình ảnh mặt nạ. Viết tắt border bao gồm một border-color. Chúng ta cũng gồm một background-color. Chúng cung cấp nền xanh lá cây và viền xanh dương để che phủ. Cuối cùng, tất cả các phần tử <div> của chúng ta được cung cấp một mask-image.

div {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image: url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
}
section {
  border: 1px solid black;
}

Chúng ta cung cấp cho mỗi <div> một giá trị mask-origin khác nhau.

.content div {
  mask-origin: content-box;
}

.padding div {
  mask-origin: padding-box;
}

.border div {
  mask-origin: border-box;
}

.comparison div {
  mask-image: none;
}

Chúng ta cũng tạo ra một số văn bản bên trong mỗi <section> để chỉ ra gốc mặt nạ cho mỗi vùng chứa <div>.

section::before {
  content: attr(class);
  display: block;
  text-align: center;
}

body {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;
}

Kết quả

Lưu ý sự khác biệt giữa ba giá trị. Trong ba hộp đầu tiên, tương ứng, mặt nạ bắt nguồn từ:

• Cạnh ngoài của viền.
• Cạnh viền bên trong, là cạnh ngoài của hộp đệm.
• Cạnh đệm bên trong, là cạnh ngoài của hộp nội dung.

Hộp thứ tư không có mask-image được chỉ định: đây là hình ảnh tham chiếu, được bao gồm để cho phép bạn dễ dàng hình dung phạm vi của các vùng nội dung và đệm.

Nhiều giá trị

Ví dụ này minh họa việc sử dụng các giá trị mask-origin khác nhau cho các mask-image khác nhau được áp dụng cho một phần tử đơn.

HTML

Chúng ta gồm một <div> đơn.

<div></div>

CSS

Chúng ta áp dụng ba hình ảnh mặt nạ thay vì một, mỗi hình ảnh với mask-position khác nhau. Chúng ta cũng đặt các hình ảnh mặt nạ không lặp lại.

div {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 10px solid blue;
  background-color: #8cffa0;
  padding: 10px;
  mask-image:
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg"),
    url("https://mdn.github.io/shared-assets/images/examples/mask-star.svg");
  mask-position:
    top left,
    top right,
    bottom center;
  mask-repeat: no-repeat;
  mask-origin: content-box, border-box;
}

Kết quả

Chúng ta có ba giá trị mask-image, nhưng chỉ có hai giá trị mask-origin. Điều này có nghĩa là các giá trị mask-origin được lặp lại, như thể chúng ta đã đặt mask-origin: content-box, padding-box, content-box;. Ngôi sao border-box, mặt nạ duy nhất chồng lên viền, là ngôi sao trên cùng bên phải.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• background-origin
• mask-image
• mask-position
• mask-repeat
• mask-size
• mask viết tắt
• Giới thiệu về mặt nạ CSS
• Các thuộc tính mask CSS
• Khai báo nhiều mặt nạ
• Mô-đun CSS masking