คลิปพื้นหลังและที่มาของพื้นหลังเป็นคุณสมบัติโมดูลพื้นหลังใหม่ที่เพิ่มเข้ามาใน CSS3 ซึ่งใช้เพื่อกำหนดตำแหน่งของพื้นหลัง
คลิปพื้นหลังใช้เพื่อกำหนดว่าพื้นหลังมีพื้นที่เส้นขอบหรือไม่ และต้นกำเนิดพื้นหลังใช้เพื่อกำหนดตำแหน่งอ้างอิงสำหรับการคำนวณตำแหน่งพื้นหลัง
ไวยากรณ์คือ:
คลิปพื้นหลัง: [border | .padding] [, [border | .padding]]* |
สำหรับคลิปพื้นหลัง:
หากเป็นค่าการเติม พื้นหลังจะละเว้นขอบการเติมและเส้นขอบจะโปร่งใส ถ้าเป็นค่าเส้นขอบ พื้นหลังจะรวมพื้นที่เส้นขอบด้วย หากมีภาพพื้นหลังหลายภาพ ค่าคลิปพื้นหลังที่เกี่ยวข้องจะถูกคั่นด้วยเครื่องหมายจุลภาค
สำหรับที่มาของพื้นหลัง:
หากเป็นค่าการเติม ตำแหน่งจะสัมพันธ์กับขอบการเติม ("0 0" คือมุมซ้ายบนของขอบการเติม และ "100% 100%" คือมุมขวาล่าง) ถ้าเป็นค่าเส้นขอบ หมายความว่าขอบเส้นขอบแบบสัมพัทธ์ ค่าเส้นขอบสัมพันธ์กับขอบเนื้อหา เช่นเดียวกับพื้นหลังคลิป ค่าหลายค่าจะถูกคั่นด้วยเครื่องหมายจุลภาค หากคลิปพื้นหลังเป็นค่าการเติม พื้นหลังต้นกำเนิดคือค่าเส้นขอบ และตำแหน่งพื้นหลังเป็น "ซ้ายบน" (ค่าเริ่มต้นเริ่มต้น) มุมซ้ายบนของภาพพื้นหลังจะถูกตัดออก
คุณลักษณะทั้งสองนี้จะปรากฏจาก CSS3 เท่านั้น แล้วพฤติกรรมเริ่มต้นในโมดูลพื้นหลังเมื่อไม่ได้ใช้คุณลักษณะนี้ล่ะ
| พื้นหลังคลิปมีค่าเริ่มต้นเป็นเช่น background-clip:border background-origin มีค่าเริ่มต้นเป็นเช่น background-origin:padding |
แต่ IE เป็นกรณีพิเศษ (มันห่วย)
ใน IE6 และ IE7 พื้นหลังขององค์ประกอบทั่วไป (ยกเว้นปุ่ม ฯลฯ) จะเทียบเท่ากับ: background-clip:border; background-origin:border;
พื้นหลังขององค์ประกอบ hasLayout (ปุ่มบวก ฯลฯ ) เทียบเท่ากับ: background-clip:padding;
คุณสมบัติ CSS3 คู่นี้ถูกนำมาใช้ในเบราว์เซอร์เช่น Mozilla, Safari 3 และ Konqueror แต่คุณสมบัติเหล่านี้ทั้งหมดแสดงผ่านคุณสมบัติส่วนตัว
คุณลักษณะส่วนตัวของเบราว์เซอร์พื้นฐานที่ไม่ใช่ IE มักจะเริ่มต้นด้วย -xxx-, -o- เป็นส่วนตัวสำหรับ Opera โดยมี Presto เป็นเครื่องมือ, -icab- เป็นส่วนตัวสำหรับ iCab และ -khtml- เป็นเบราว์เซอร์ที่มี KHTML เป็นเครื่องมือ (เช่น Konqueror Safari) -moz- เป็นเบราว์เซอร์ที่ใช้กลไกการเรนเดอร์ Webkit ของ Mozilla (เช่น Firefox, Mozilla) -webkit- เป็นเบราว์เซอร์ (เช่น Safari, Swift) ที่ใช้กลไกการเรนเดอร์ Webkit (อนุพันธ์ของ KHTML ) .
นั่นคือแอตทริบิวต์ส่วนตัวที่รองรับคือ:
| -moz-พื้นหลังคลิป -webkit-พื้นหลังคลิป -khtml-พื้นหลังคลิป -moz-พื้นหลัง-กำเนิด -webkit-พื้นหลัง-กำเนิด -khtml-พื้นหลัง-กำเนิด |
นี่คือตัวอย่างง่ายๆ ของการใช้แอตทริบิวต์ background-origin ซึ่งจะมีผลดังนี้:
รหัส HTML:
| <button>มาตรฐานเว็บ www.div-css.com</button> |
รหัสซีเอสเอส:
ปุ่ม { border:3px double #95071b;/*ใช้ 3px double border เพื่อจำลองเส้นสีขาวในการออกแบบ*/ สีพื้นหลัง:#95071b; /*ตั้งค่าวิธีการครอบตัดพื้นหลังและเส้นบอกแนว*/ -moz-พื้นหลังต้นกำเนิด: การขยาย; /*รองรับการส่งต่อ*/ สี:#fff; /*แก้ไขปัญหาความสูงภายใต้ IE6*/ |
ข้อเสีย: ไม่สามารถบรรลุเอฟเฟกต์นี้ได้ภายใต้ Opera แน่นอนว่านี่เป็นเพียงวิธีแก้ปัญหาสำหรับผู้ที่หมกมุ่นอยู่กับโค้ด HTML (จำกัดเฉพาะการเรียนรู้และความเข้าใจเกี่ยวกับคุณลักษณะของคลิปพื้นหลังและที่มาของพื้นหลัง) แน่นอน คุณยังสามารถลองใช้วิธีอื่นได้ ซึ่งอาจทำให้ CSS กระชับยิ่งขึ้น ส่วนข้อดีของวิธีการต่างๆ ข้อบกพร่องก็อยู่ที่คุณจะชั่งน้ำหนัก