CSS clip 属性
การกำหนดและการใช้งาน
คุณสมบัติ clip ตัดเข้าองค์ประกอบที่มีการจัดตำแหน่งอิสระ
เมื่อขนาดของภาพใหญ่กว่าองค์ประกอบที่มีภาพนั้นจะเกิดอะไรบ้าง? คุณสมบัติ "clip" อนุญาตให้คุณกำหนดขนาดที่เห็นได้ขององค์ประกอบ องค์ประกอบนี้จะถูกตัดเข้าและแสดงในรูปร่างนี้。
คำอธิบาย
คุณสมบัตินี้ใช้เพื่อกำหนดตัวกล่องตัดเข้าของรูปตัวละครอีกตัวหนึ่ง สำหรับองค์ประกอบที่กำหนดเป็นอิสระ เนื้อหาที่อยู่ในตัวกล่องตัดเข้านี้เท่านั้นที่จะเห็นได้ ส่วนที่อยู่นอกจากบริเวณตัดเข้าจะถูกจัดการตามค่า overflow ของมัน บริเวณตัดเข้าอาจใหญ่กว่าหรือเล็กกว่าเนื้อหาขององค์ประกอบ。
ดูเพิ่มเติม:
ตัวอย่าง CSS:การจัดตำแหน่ง CSS
คู่มืออ้างอิง HTML DOM:คุณสมบัติ clip
ตัวอย่าง
ตัดเข้ารูปร่างภาพ:
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
ภาษา CSS
clip: auto|รูปร่าง|initial|inherit;
ค่าของอุปกรณ์
| ค่า | คำอธิบาย |
|---|---|
| รูปร่าง | ตั้งค่ารูปร่างขององค์ประกอบส่วนตัว。ค่าที่ถูกต้องสำหรับรูปร่างคือ: rect (ด้านบน, ขวา, ด้านล่าง, ซ้าย) |
| auto | ค่าเริ่มต้น. ไม่นำไปใช้การตัดเข้าใดๆ。 |
| inherit | กำหนดให้มีค่าจากองค์ประกอบพ่อที่สืบทอดคุณสมบัติ clip ขององค์ประกอบนี้。 |
รายละเอียดเทคโนโลยี
| ค่าเริ่มต้น: | auto |
|---|---|
| เชื่อมโยง: | no |
| เวอร์ชัน: | CSS2 |
| JavaScript ภาษา: | object.style.clip="rect(0px,50px,50px,0px)" |
ตัวอย่างเพิ่มเติม
- ตั้งค่ารูปร่างขององค์ประกอบส่วนตัว
- ตัวอย่างนี้แสดงว่าจะเมื่อไรตั้งค่ารูปร่างขององค์ประกอบส่วนตัว。องค์ประกอบส่วนตัวนี้ถูกตัดเข้ารูปร่างและแสดงออกมา。
การสนับสนุนโปรแกรมนี้
ตัวเลขในตารางบอกว่าอุปกรณ์เว็บแรกที่สนับสนุนคุณสมบัตินี้คืออะไร。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 8.0 | 1.0 | 1.0 | 7.0 |
