เกี่ยวกับมาสก์

มาสก์จะซ่อนบางส่วนขององค์ประกอบโฮสต์โดยอิงจากรูปร่างหรือระดับความโปร่งใส องค์ประกอบโฮสต์อาจเป็นรูปภาพ div ที่เก็บข้อความ หรือคอมโพเนนต์ก็ได้

องค์ประกอบแต่ละรายการจะมีมาสก์ได้เพียง 1 รายการเท่านั้น แต่คุณอาจสร้างเลเยอร์มาสก์ด้วยการรวมองค์ประกอบโฮสต์ใน div และใช้มาสก์กับ div คอนเทนเนอร์ หรืออาจฝังองค์ประกอบอีกรายการภายในองค์ประกอบโฮสต์และเพิ่มมาสก์ลงในองค์ประกอบย่อยก็ได้

หัวข้อในหน้านี้

• ประเภทของมาสก์
• การเลือกมาสก์
• การแก้ไขมาสก์
• การทำให้มาสก์เคลื่อนไหว
• มาสก์ในรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์

ประเภทของมาสก์

• มาสก์รูปภาพ
• มาสก์การไล่ระดับสี
• มาสก์เส้นทางการตัด

ความเข้ากันได้กับเบราว์เซอร์

Microsoft Edge เวอร์ชัน 40 และเก่ากว่ารองรับเฉพาะมาสก์เส้นทางการตัดรูปสี่เหลี่ยมผืนผ้า โดยจะไม่สนใจมาสก์ประเภทอื่นๆ และที่อยู่ในรูปร่างอื่นๆ

มาสก์รูปภาพ

มาสก์รูปภาพใช้พื้นที่โปร่งใสของรูปภาพเพื่อซ่อนองค์ประกอบโฮสต์

องค์ประกอบโฮสต์

มาสก์รูปภาพ

ผลลัพธ์

วิธีเพิ่มมาสก์รูปภาพ

1. คลิกขวาที่องค์ประกอบที่คุณต้องการมาสก์
2. เลือกเพิ่มมาสก์รูปภาพ... จากเมนูป๊อปอัป
3. นำเข้าหรือเลือกรูปภาพที่คุณต้องการใช้เป็นมาสก์

คุณปรับขนาดและตำแหน่งของมาสก์ได้โดยใช้เครื่องมือการเลือก หรือแผงคุณสมบัติ

หมายเหตุ: มาสก์รูปภาพใช้การจัดตำแหน่งแบบเปอร์เซ็นต์ไม่ได้

มาสก์การไล่ระดับสี

มาสก์การไล่ระดับสีจะซ่อนองค์ประกอบโฮสต์ตามการไล่ระดับสีของระดับความโปร่งใส

องค์ประกอบโฮสต์

มาสก์การไล่ระดับสี

ผลลัพธ์

Google Web Designer รองรับการไล่ระดับสีทั้ง 2 ประเภทสำหรับมาสก์ ได้แก่

• การไล่ระดับสีแบบเส้นตรง
• การไล่ระดับสีแบบรัศมี

วิธีเพิ่มมาสก์การไล่ระดับสีมีดังนี้

1. คลิกขวาที่องค์ประกอบที่คุณต้องการมาสก์
2. เลือกเพิ่มมาสก์การไล่ระดับสีจากเมนูป๊อปอัป
3. คลิกตัวอย่างการไล่ระดับสีในแผงคุณสมบัติเพื่อปรับแต่งประเภท สี ความทึบแสง และมุมของการไล่ระดับสี (สำหรับการไล่ระดับสีแบบเส้นตรงเท่านั้น)

โดยค่าเริ่มต้น มาสก์การไล่ระดับสีจะมีขนาดเท่ากันกับองค์ประกอบโฮสต์ แต่คุณจะปรับคุณสมบัติตำแหน่งและขนาดของมาสก์ได้โดยใช้เครื่องมือการเลือก หรือแผงคุณสมบัติ

หมายเหตุ: มาสก์การไล่ระดับสีใช้การจัดตำแหน่งแบบเปอร์เซ็นต์ไม่ได้

มาสก์เส้นทางการตัด

มาสก์เส้นทางการตัดจะใช้รูปทรงเรขาคณิตเพื่อกำหนดว่าจะแสดงองค์ประกอบโฮสต์ส่วนใด

องค์ประกอบโฮสต์

มาสก์เส้นทางการตัด

ผลลัพธ์

คุณเลือกประเภทของรูปร่างมาสก์ได้โดยกดเครื่องมือมาสก์เส้นทางการตัดในแถบเครื่องมือค้างไว้จนเมนูป๊อปอัปปรากฏขึ้น

มาสก์รูปสี่เหลี่ยมผืนผ้า (เริ่มต้น)
มาสก์วงรี
มาสก์รูปหลายเหลี่ยม

ความเข้ากันได้กับเบราว์เซอร์

• Internet Explorer และ Microsoft Edge รองรับเฉพาะมาสก์เส้นทางการตัดรูปสี่เหลี่ยมผืนผ้าที่มีตำแหน่งและขนาดที่ระบุเป็นพิกเซล โดยจะไม่สนใจมาสก์แบบเป็นเปอร์เซ็นต์และมาสก์รูปร่างอื่นๆ รวมถึงมุมโค้งในมาสก์รูปสี่เหลี่ยมผืนผ้า

• Firefox และ Safari อาจแสดงผลมาสก์รูปสี่เหลี่ยมผืนผ้าไม่ถูกต้องหากมีมุมโค้งที่รัศมีของมุมมีขนาดใหญ่ (เมื่อเทียบกับขนาดมาสก์)

• Safari ไม่รองรับมาสก์เส้นทางการตัดในรูปร่างที่วาดโดยใช้เครื่องมือรูปสี่เหลี่ยมผืนผ้า วิธีแก้ปัญหาเบื้องต้นคือ ใช้องค์ประกอบ div แทนรูปสี่เหลี่ยมผืนผ้า และวางมาสก์ในองค์ประกอบ div

• ใน Chrome และ Opera มาสก์เส้นทางการตัดจะแสดงผลไม่ถูกต้องเมื่อองค์ประกอบโฮสต์มีองค์ประกอบย่อยที่มีการเปลี่ยนรูปแบบเป็นแบบ 3 มิติ

• มาสก์รูปสี่เหลี่ยมผืนผ้าที่ตั้งค่ามุมโค้งโดยใช้รัศมีแบบเป็นเปอร์เซ็นต์อาจแสดงผลแตกต่างกันเล็กน้อยในแต่ละเบราว์เซอร์

วิธีเพิ่มมาสก์เส้นทางการตัดมีดังนี้

1. เลือกองค์ประกอบที่ต้องการมาสก์
2. เลือกเครื่องมือมาสก์สำหรับรูปร่างที่ต้องการ
3. ตั้งค่าตัวเลือกเพิ่มเติมสำหรับรูปร่างมาสก์
   • มาสก์รูปสี่เหลี่ยมผืนผ้าเท่านั้น: สำหรับมุมโค้ง ให้ตั้งค่ารัศมีของมุมในแถบตัวเลือกเครื่องมือที่ด้านบน ใช้ปุ่มใช้ค่าเดิม เพื่อใช้รัศมีเดียวกันทั้ง 4 มุม
   • มาสก์รูปหลายเหลี่ยมเท่านั้น: เลือกรูปร่างที่ต้องการจากแถบตัวเลือกเครื่องมือที่ด้านบน ใช้ตัวเลือกรูปแบบอิสระเพื่อวาดรูปร่างของตัวเอง หากเลือกรูปหลายเหลี่ยมปกติ ให้ป้อนจำนวนด้านของรูปหลายเหลี่ยมที่ต้องการ
4. วาดมาสก์เหนือองค์ประกอบโฮสต์
   • กดแป้น Shift ค้างไว้ขณะวาดเพื่อจำกัดมาสก์ให้มีความกว้างและความสูงเท่ากัน แป้น Shift จะไม่ส่งผลต่อมาสก์รูปแบบอิสระ หรือรูปร่างบางอย่างที่กำหนดไว้ล่วงหน้าซึ่งมักจะวาดโดยมีด้านที่ความยาวเท่ากันเสมอ ได้แก่ สามเหลี่ยม สี่เหลี่ยมขนมเปียกปูน ห้าเหลี่ยม หกเหลี่ยม และดาว
   • กดแป้น Alt ค้างไว้เพื่อใช้ตำแหน่งการวาดภาพเริ่มต้นเป็นจุดศูนย์กลางของมาสก์

หมายเหตุ: หลังจากวาดมาสก์รูปหลายเหลี่ยมแล้ว คุณจะลากจุดยอดแต่ละจุดเพื่อเปลี่ยนรูปร่างมาสก์ได้ แต่เปลี่ยนจำนวนด้านไม่ได้

รูปร่างของมาสก์รูปหลายเหลี่ยม

	รูปแบบอิสระ (วาดรูปร่างขึ้นมาเอง)
	รูปหลายเหลี่ยมปกติ (กำหนดจำนวนด้าน ความยาวของแต่ละด้านที่วาดจะเท่ากัน)
	รูปสามเหลี่ยม
	รูปสี่เหลี่ยมผืนผ้า
	เฟรม
	รูปสี่เหลี่ยมขนมเปียกปูน
	รูปห้าเหลี่ยม
	รูปหกเหลี่ยม
	เครื่องหมายบั้งขวา
	เครื่องหมายบั้งซ้าย
	กากบาท
	ดาว
	ลูกศรขวา
	ลูกศรซ้าย

การเลือกมาสก์

• ในพื้นที่งาน: เลือกองค์ประกอบโฮสต์ จากนั้นคลิกมาสก์ โดยมาสก์ที่เลือกจะมีเส้นขอบเป็นสีเขียว

• ในไทม์ไลน์ของโหมดขั้นสูง: เลือกเลเยอร์มาสก์ที่อยู่ใต้เลเยอร์องค์ประกอบโฮสต์ เลเยอร์มาสก์จะมีสัญลักษณ์ อยู่หน้าชื่อเลเยอร์

คุณซ่อนและล็อกเลเยอร์มาสก์ในไทม์ไลน์ของโหมดขั้นสูงได้ เพื่อให้ทำงานกับองค์ประกอบโฮสต์ได้ง่ายขึ้น

การเลือกมาสก์หลายรายการ

ใช้ Ctrl+ คลิกเพื่อเลือกเลเยอร์มาสก์หลายชั้นในไทม์ไลน์ของโหมดขั้นสูงเพื่อลบทุกเลเยอร์พร้อมกันในครั้งเดียว แต่คุณแก้ไขมาสก์ได้เพียงครั้งละ 1 รายการเท่านั้น

คุณลบชุดผสมระหว่างองค์ประกอบและมาสก์ได้ต่อเมื่อมีองค์ประกอบโฮสต์สำหรับมาสก์รวมอยู่ในรายการที่เลือกด้วย

การแก้ไขมาสก์

คุณแก้ไขมาสก์ได้โดยตรงในพื้นที่งาน หรือจะใช้แผงคุณสมบัติก็ได้ คุณสมบัติ CSS สำหรับมาสก์ไม่พร้อมใช้งานในแผง CSS

คุณแก้ไขมาสก์ได้ด้วยวิธีต่อไปนี้

• ตัด คัดลอก และวางมาสก์
• ย้ายมาสก์
• ปรับขนาดมาสก์
• หมุนมาสก์
• เปลี่ยนแหล่งที่มาของมาสก์รูปภาพ
• เปลี่ยนการไล่ระดับสีของมาสก์การไล่ระดับสี
• เปลี่ยนความโค้งของมุมของมาสก์รูปสี่เหลี่ยมผืนผ้า
• เปลี่ยนรูปร่างของมาสก์รูปหลายเหลี่ยม

ตัด คัดลอก และวางมาสก์

คุณตัดหรือคัดลอกและวางมาสก์ไปยังองค์ประกอบอื่นหรือแม้แต่ไปยังเอกสารอื่นได้โดยใช้วิธีต่อไปนี้

• บนพื้นที่งานหรือในไทม์ไลน์โหมดขั้นสูง
  • คลิกขวาที่มาสก์และเลือกตัดหรือคัดลอก
  • คลิกขวาที่องค์ประกอบที่ต้องการมาสก์และเลือกวางหรือแทนที่มาสก์
• ในไทม์ไลน์โหมดขั้นสูง
  • ลากเลเยอร์มาสก์ไปยังเลเยอร์ขององค์ประกอบเพื่อสลับมาสก์ไปยังองค์ประกอบโฮสต์อื่น (ไม่มีการแทนที่มาสก์)
  • กดแป้น Alt ค้างไว้ขณะลากเลเยอร์มาสก์เพื่อคัดลอกมาสก์ไปยังองค์ประกอบอื่น (ไม่มีการแทนที่มาสก์)
• แป้นพิมพ์ลัด
  • ตัด - Ctrl+X (Windows) หรือ ⌘+X (Mac)
  • คัดลอก - Ctrl+C (Windows) หรือ ⌘+C (Mac)
  • วาง - Ctrl+V (Windows) หรือ ⌘+V (Mac)
• คำสั่งในเมนู
  • แก้ไข > ตัด
  • แก้ไข > คัดลอก
  • แก้ไข > วาง หรือแทนที่มาสก์

ระบบจะวางภาพเคลื่อนไหวของมาสก์ทั้งหมดด้วย

ข้อจำกัดในการคัดลอกและวางมาสก์

• คุณเลือกมาสก์ที่จะตัดหรือคัดลอกและองค์ประกอบที่จะวางมาสก์ได้แค่อย่างละ 1 รายการ
• การวางมาสก์ไปยังองค์ประกอบที่มีมาสก์อยู่แล้วจะแทนที่มาสก์เดิมที่มีอยู่
• คุณจะตัด คัดลอก หรือวางมาสก์ในกฎของสื่อไม่ได้

ย้ายมาสก์

เลือกมาสก์ที่ต้องการย้าย จากนั้นใช้วิธีใดวิธีหนึ่งต่อไปนี้

• แก้ไขคุณสมบัติตำแหน่งด้านบนและด้านซ้ายในแผงคุณสมบัติ โดยค่าเหล่านี้จะสัมพันธ์กับมุมซ้ายบนขององค์ประกอบโฮสต์
• ใช้แป้นลูกศรเพื่อย้ายมาสก์ทีละ 1 พิกเซล กดแป้น Shift ค้างไว้ระหว่างที่กดแป้นลูกศรเพื่อย้ายมาสก์ไป 10 พิกเซล
• ใช้เครื่องมือการเลือก เพื่อใช้เมาส์ลากมาสก์ กดแป้น Shift ค้างไว้ขณะลากเพื่อเลื่อนมาสก์ไปตามแกนเดียวเท่านั้น

มาสก์อาจจัดวางอยู่นอกขอบเขตขององค์ประกอบโฮสต์ได้

หมายเหตุ: มาสก์รูปภาพและการไล่ระดับสีใช้การจัดตำแหน่งแบบเปอร์เซ็นต์ไม่ได้

ปรับขนาดมาสก์

เลือกมาสก์ที่ต้องการปรับขนาดแล้วทำดังนี้

• แก้ไขคุณสมบัติความกว้างและความสูงในแผงคุณสมบัติ
• ใช้เครื่องมือการเลือก แบบเปิดใช้ตัวเลือกการควบคุมการเปลี่ยนแปลงในแถบตัวเลือกเครื่องมือที่ด้านบน
  • กดแป้น Shift ค้างไว้ระหว่างที่ลากเพื่อรักษาอัตราส่วนไว้
  • กดแป้น Alt (Windows) หรือ Option (Mac) ค้างไว้ขณะลากเพื่อปรับขนาดมาสก์โดยไม่เปลี่ยนจุดศูนย์กลาง

หมุนมาสก์

คุณหมุนมาสก์โดยตรงไม่ได้ แต่จะทำให้มาสก์หมุนได้ด้วยการทำตามขั้นตอนต่อไปนี้ก่อนที่จะเพิ่มมาสก์

1. รวมองค์ประกอบที่ต้องการมาสก์
2. เพิ่มมาสก์ใน div คอนเทนเนอร์
3. หมุน div คอนเทนเนอร์ ซึ่งจะทำให้มาสก์หมุนเช่นเดียวกัน
4. หมุนองค์ประกอบดั้งเดิมไปในด้านตรงกันข้าม

เปลี่ยนแหล่งที่มาของมาสก์รูปภาพ

คุณเปลี่ยนรูปภาพที่ใช้สำหรับมาสก์รูปภาพได้โดยทำตามขั้นตอนต่อไปนี้

1. เลือกมาสก์ที่ต้องการ
2. ในแผงคุณสมบัติ ให้คลิกปุ่มกำหนดมาสก์รูปภาพในช่องแหล่งที่มา
3. เลือกรูปภาพจากคลัง หรือคลิกปุ่มนำเข้าเนื้อหา เพื่อใช้รูปอื่น
4. คลิกตกลง

เปลี่ยนการไล่ระดับสีของมาสก์การไล่ระดับสี

คุณปรับแต่งการไล่ระดับสีที่ใช้สำหรับมาสก์การไล่ระดับสีได้

1. เลือกมาสก์ที่ต้องการ
2. ในแผงคุณสมบัติ ให้คลิกตัวอย่างการไล่ระดับสี
3. แก้ไขการไล่ระดับสี
   • ประเภทการไล่ระดับสี: เลือกปุ่มการไล่ระดับสีแบบเส้นตรง หรือการไล่ระดับสีแบบรัศมี
   • ระยะการเปลี่ยนสี: ลากตัวทำเครื่องหมายความโปร่งใสไปตามด้านบนของแถบการไล่ระดับสีเพื่อเปลี่ยนแปลงระยะการเปลี่ยนสี
   • ความโปร่งใส: ตัวทำเครื่องหมายความโปร่งใสจะกำหนดระดับความทึบแสงที่จุดใดจุดหนึ่งในการไล่ระดับสี โดย 100% หมายความว่าองค์ประกอบโฮสต์จะแสดงอย่างสมบูรณ์ และ 0% หมายความว่าองค์ประกอบโฮสต์จะถูกซ่อนอย่างสมบูรณ์ คลิกตัวทำเครื่องหมายความโปร่งใสเพื่อแก้ไขระดับความทึบแสงในช่องเปอร์เซ็นต์ทางด้านขวา
   • ตัวทำเครื่องหมายความโปร่งใสเพิ่มเติม: หากต้องการเพิ่มตัวทำเครื่องหมายความโปร่งใส่เพิ่มเติม ให้คลิกแถบการไล่ระดับสี หากต้องการนำตัวทำเครื่องหมายความโปร่งใสออก ให้ลากตัวทำเครื่องหมายลงไปด้านล่าง
   • มุม: สำหรับการไล่ระดับสีแบบเส้นตรง คุณจะปรับมุมได้
   • ค่าเริ่มต้น: คลิกปุ่มการไล่ระดับสีเริ่มต้น เพื่อรีเซ็ตการไล่ระดับสีเป็นการตั้งค่าเริ่มต้น (การไล่ระดับสีแบบเส้นตรงจาก 0% เป็น 100% ที่ 90 องศา)

เปลี่ยนความโค้งของมุมของมาสก์รูปสี่เหลี่ยมผืนผ้า

คุณเปลี่ยนมุมของมาสก์รูปสี่เหลี่ยมผืนผ้าให้เป็นมุมฉากหรือมุมโค้ง และปรับรัศมีความโค้งของมุมโค้งได้

1. เลือกมาสก์ที่ต้องการ
2. ในแผงคุณสมบัติ ให้ปรับรัศมีของมุมเป็นพิกเซลหรือเป็นเปอร์เซ็นต์ การตั้งค่ารัศมีเป็น 0 จะทำให้เป็นมุมฉาก
3. เมื่อใช้ปุ่มใช้ค่าเดิม ค่าเดียวกันจะมีผลกับทั้ง 4 มุม ปิดใช้งานปุ่ม เพื่อกำหนดค่าแต่ละมุมแยกกัน

เปลี่ยนรูปร่างของมาสก์รูปหลายเหลี่ยม

คุณปรับเปลี่ยนรูปร่างของมาสก์รูปหลายเหลี่ยมบนพื้นที่งานได้ โดยทำดังนี้

1. เลือกมาสก์ที่ต้องการ
2. เลือกเครื่องมือมาสก์รูปหลายเหลี่ยม จากแถบเครื่องมือ แฮนเดิลจะปรากฏที่จุดยอดแต่ละจุด
3. ลากจุดยอดแต่ละจุดไปยังตำแหน่งที่ต้องการ
   • กดแป้น Shift ค้างไว้ขณะลากเพื่อย้ายจุดยอดไปตามแกนใดแกนหนึ่งเท่านั้น (แนวตั้งหรือแนวนอน)

หมายเหตุ: คุณเปลี่ยนจำนวนด้านของมาสก์รูปหลายเหลี่ยมที่มีอยู่ไม่ได้

การทำให้มาสก์เคลื่อนไหว

คุณทำให้ขนาดและตำแหน่งของมาสก์เคลื่อนไหวได้ และยังใช้ช่วงการมองเห็นเพื่อควบคุมเวลาที่มาสก์จะปรากฏหรือหายไปได้ด้วย ภาพเคลื่อนไหวของมาสก์จะไม่ขึ้นกับภาพเคลื่อนไหวใดๆ สำหรับองค์ประกอบโฮสต์

มาสก์วงรีที่เคลื่อนไหว

สำหรับมาสก์รูปสี่เหลี่ยมผืนผ้า คุณทำให้มุมโค้งเคลื่อนไหวได้ สำหรับมาสก์เส้นทางการตัดของรูปหลายเหลี่ยม คุณยังสร้างภาพเคลื่อนไหวให้รูปร่างของมาสก์ได้ด้วย (แต่ไม่ใช่จำนวนของด้าน) โดยการปรับเปลี่ยนตำแหน่งจุดยอดที่คีย์เฟรม

คุณจะแก้ไขมาสก์ที่เฟรมหลายเฟรมไม่ได้ เลือกคีย์เฟรมทีละรายการเพื่อแก้ไขภาพเคลื่อนไหวของมาสก์

หมายเหตุ: เมื่อทำให้มาสก์รูปภาพเคลื่อนไหวช้าลง คุณอาจสังเกตเห็นการกระตุกเนื่องจากมีการปัดค่าเศษส่วนของพิกเซลระหว่างคีย์เฟรม

ความเข้ากันได้กับเบราว์เซอร์

ภาพเคลื่อนไหวของมาสก์เส้นทางการตัดจะไม่เล่นใน Safari หากเอกสารมีองค์ประกอบ <canvas> เช่น สำหรับคอมโพเนนต์ "แกลเลอรีการเปลี่ยน" "เอฟเฟกต์รูปภาพ" หรือ "เอฟเฟกต์อนุภาค"

มาสก์ในรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์

กฎสื่อช่วยให้คุณลบล้างคุณสมบัติและภาพเคลื่อนไหวของมาสก์สำหรับช่วงขนาดวิวพอร์ตที่เจาะจงได้ สำหรับมาสก์รูปภาพ คุณยังจะลบล้างแหล่งที่มาเพื่อใช้รูปภาพอื่นได้ด้วย และสำหรับมาสก์การไล่ระดับสี คุณก็จะเปลี่ยนการไล่ระดับสีได้

หมายเหตุ: การนำการลบล้างสำหรับคุณสมบัติตำแหน่งหรือขนาดออกจะรีเซ็ตคุณสมบัติตำแหน่งทั้ง 2 รายการ (ด้านบนและด้านซ้าย) หรือคุณสมบัติขนาดทั้ง 2 รายการ (ความกว้างและความสูง) โดยอัตโนมัติ สำหรับมาสก์เส้นทางการตัด คุณสมบัติตำแหน่งและขนาดทั้งหมดจะถูกรีเซ็ต