Thuộc tính mask-origin

Thuộc tính mask-origin thiết lập điểm gốc để định vị mặt nạ. Nó xác định phần nào của phần tử (đường viền, phần đệm hay nội dung) mà mặt nạ sẽ được đặt tương đối.

Cú pháp

cssbộ chọn {
  mask-origin: content-box | padding-box | border-box;
}

Giá trị

Ví dụ . border-box

Mặt nạ được định vị tương đối với đường viền của phần tử:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: border-box;
}

Результат:

Ví dụ . padding-box

Mặt nạ được định vị tương đối với vùng phần đệm:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: padding-box;
}

Результат:

Ví dụ . content-box

Mặt nạ được định vị tương đối với nội dung:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  padding: 20px;
  border: 30px dashed rgba(0,0,0,0.3);
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px;
  mask-repeat: no-repeat;
  mask-origin: content-box;
}

Результат:

Xem thêm