CSS mask-position รายละเอียด

คำนิยามและวิธีใช้

mask-position ตั้งค่าคุณสมบัติสำหรับตำแหน่งต้นของอิมเจอ์มาสเก็ต ต่อไปจากพื้นที่ตำแหน่งมาสเก็ต

คำแนะนำ:โดยเริ่มต้น อิมเจอ์มาสเก็ตจะถูกจัดวางที่ด้านบนซ้ายขององค์ประกอบ และจะทำการลงทุกทางตามทิศทางตรงขึ้นของมุมต่างๆ

ตัวอย่าง

ตัวอย่าง 1

ตั้งตำแหน่งอิมเจอ์มาสเก็ตในตำแหน่งกลาง:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: center;
}

ลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งตำแหน่งอิมเจอ์มาสเก็ตในบริเวณด้านล่างขวา:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 50%;
  mask-repeat: no-repeat;
  mask-position: 100% 100%;
}

ลองด้วยตัวเอง

การเขียนบทรหัส CSS

mask-position: value;

ค่าคุณสมบัติ

ค่า การอธิบาย
  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
 หากเรียกใช้คำที่มีความหมายเดียว ค่าอื่นจะเป็น "center"。
x% y%

ค่าแรกเป็นตำแหน่งนับตั้งแต่น้ำเนียน ค่าที่สองเป็นตำแหน่งนับตั้งแต่ต้นตรง

บริเวณด้านบนซ้ายเป็น 0% 0%。บริเวณด้านล่างขวาเป็น 100% 100%

หากเรียกใช้ค่าเพียงหนึ่งตัวเดียว ตัวอื่นจะเป็น 50%。

ค่าเริ่มต้นเป็น: 0% 0%
xpos ypos

ค่าแรกเป็นตำแหน่งนับตั้งแต่น้ำเนียน ค่าที่สองเป็นตำแหน่งนับตั้งแต่ต้นตรง

บริเวณด้านบนซ้ายเป็น 0 0 หน่วยนับได้เป็นพิกเซล (0px 0px) หรือหน่วย CSS อื่นๆ

หากเรียกใช้ค่าเพียงหนึ่งตัวเดียว ตัวอื่นจะเป็น 50%。

สามารถผสมกัน % และตำแหน่งได้
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน。ดู: initial。
inherit สืบทอดคุณสมบัตินี้จากตัวปลอดภัยของเล่มใหญ่ของตัวนี้。ดู: inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: 0% 0%
การสืบทอด: ไม่
การสร้างอนิมาชั่น: ไม่สนับสนุน。อ่านเพิ่มเติมที่:คุณสมบัติที่เกี่ยวข้องกับอนิมาชั่น。
เวอร์ชั่น: มอดูล Masking ระดับ 1
การเขียนบทรหัสจากภาษา JavaScript: object.style.maskPosition="100px center"

การสนับสนุนของเบราวเซอร์

ตัวเลขในตารางแสดงความสนิทของเวอร์ชั่นบราวเซอร์ที่สนับสนุนคุณสมบัตินี้ในครั้งแรก。

ชรอม เอดจ์ ไฟร็อกซ์ เซฟารี่ โอเปร่า
120 120 53 15.4 106

หน้าที่เกี่ยวข้อง

สอน:CSS การทำเงา

อ้างอิง：CSS mask รายละเอียด

อ้างอิง：CSS mask-clip รายละเอียด

อ้างอิง：CSS mask-composite รายละเอียด

อ้างอิง：CSS mask-image รายละเอียด

อ้างอิง：CSS mask-mode รายละเอียด

อ้างอิง：CSS mask-origin รายละเอียด

อ้างอิง：CSS mask-repeat รายละเอียด

อ้างอิง：CSS mask-size รายละเอียด

อ้างอิง：CSS mask-type รายละเอียด