تعد سمة المقطع سمة مفيدة نسبيًا، ولكنها غالبًا ما تكون نادرة في التطبيقات العملية، ويقدم موقع 52CSS.com القليل جدًا منها. هناك نقطتان يجب ملاحظتهما عند تطبيق سمة المقطع:
1. يجب استخدام سمة المقطع مع موضع سمة تحديد الموقع حتى تصبح نافذة المفعول.
2. يتم حساب إحداثيات حساب اقتصاص المقطع بدءًا من الزاوية اليسرى العليا، أي النقطة (0،0)، كما هو موضح في الشكل 3. وهذا بخلاف الحشو والهامش الأيمن والهامش السفلي لكليهما هم من أقصى اليمين والعد من الأسفل.
بناء الجملة الأساسي لسمة المقطع: مثال لكود المصدر
[www.downcodes.com] مقطع : تلقائي | ( رقم رقم رقم رقم )
قيمة:
تلقائي: القيمة الافتراضية. لا يوجد قص للكائنات
rect (رقم رقم رقم رقم): يوفر أربع قيم إزاحة محسوبة من الزاوية اليسرى العليا للكائن للإحداثيات (0،0) بترتيب أعلى يمين أسفل يسار أي من هذه القيم يمكن استبداله تلقائيًا، أي أن هذا الجانب لا يقطع
وصف سمة المقطع: استرداد أو تعيين المنطقة المرئية للكائن. الأجزاء الموجودة خارج منطقة العرض شفافة.
تحدد هذه الخاصية حجم المنطقة المرئية لكائن تم وضعه بشكل مطلق. يجب تعيين قيمة خاصية الموضع على القيمة المطلقة حتى يتم استخدام هذه الخاصية.
هذه الخاصية متاحة على منصات MAC بدءًا من IE5.
خاصية البرنامج النصي المقابلة هي مقطع .
بالإضافة إلى إنشاء نص ملون، يمكن لسمة المقطع في CSS أيضًا قص العناصر بشكل فعال في صفحات الويب الأخرى.
تحدد سمة المقطع شكل العنصر. يتم استخدام هذه الخاصية لتحديد مستطيل القطع. يكون المحتوى الموجود داخل هذا المستطيل فقط هو المرئي، والمحتوى الموجود خارج منطقة القطع هذه له نفس تأثير التجاوز: مخفي. قد تكون منطقة القطع أكبر أو أصغر من مساحة محتوى العنصر.
قيمة سمة المقطع: تلقائي |.
تلقائي يعني عدم الاقتصاص، وينبغي ملء الاتجاهات الأربعة في المستقيم بقيم رقمية، تشير إلى موضع الاقتصاص.
أدناه سأقدم مثالاً بسيطًا لقص الصورة.
قم أولاً بإعداد الصورة، كما هو موضح في الشكل 1، حجمها 159 بكسل * 99 بكسل. أخطط لاستخدام خاصية المقطع لاقتصاص الصورة بحيث يتم عرض النقطة الحمراء الكبيرة فقط في الصورة.
أقوم أولاً بإنشاء إطار div لوضع الصورة ويتم تعريف CSS الخاص به على النحو التالي:
مثال لكود المصدر
[www.downcodes.com] #imgClip {
الموقف:نسبي؛
العرض: 159 بكسل؛
الارتفاع: 99 بكسل؛
الخلفية: #FFF985؛
الهامش:0 تلقائي؛
}
تم تعيين سمة تحديد الموضع لهذا div على الموضع النسبي لاستخدامه كمعيار لتحديد موضع الصورة. يتم تعريف الخلفية على أنها #FFF985 لجعل تأثير العرض أكثر وضوحًا.
ثم حدد خصائص الاقتصاص للصورة، ويكون تعريف CSS كما يلي:
مثال لكود المصدر
[www.downcodes.com] #imgClip img {
الموقف:مطلق؛
مقطع:مستقيم (21px 68px 51px 38px) ؛
}
الموضع المطلق هنا مرتبط بـ div بمعرف imgClip، ويتم ترتيب القيم الموجودة في المقطع بالترتيب من الأعلى واليمين والأسفل واليسار.
كود أتش تي أم أل:
مثال لكود المصدر
[www.downcodes.com] <div معرف = "imgClip">
<img src="" width="159" height="99" />
</div>