تتيح خاصية...................تحديد موضع صورة الخلفية في نافذة المتصفح وتوجد عدة قيم لهذه الخاصية ؟؟
الإجابة الصحيحة من خلال موقع بوابة الإجابات هي:
background-position
خاصية `background-position` هي المسؤولة عن تحديد موضع صورة الخلفية داخل العنصر (مثل `
` أو ``) في نافذة المتصفح. ببساطة، تحدد هذه الخاصية مكان ظهور الصورة بالنسبة للعنصر الذي وضعت فيه.
كيف تعمل `background-position`؟
تعتمد `background-position` على نظام إحداثيات. تخيل أن العنصر الذي تستخدم فيه صورة الخلفية هو مساحة، والصورة نفسها موضوعة داخل هذه المساحة. تحدد `background-position` نقطة محددة داخل الصورة لتكون نقطة مرجعية، ثم تحدد مكان هذه النقطة المرجعية داخل العنصر.
قيم `background-position`:
يمكنك تحديد قيم `background-position` بطرق مختلفة:
- كلمات مفتاحية:
- `top left`: تضع الزاوية العلوية اليسرى من الصورة في الزاوية العلوية اليسرى من العنصر. (هذا هو الوضع الافتراضي إذا لم تحدد أي قيمة).
- `top center`: تضع الزاوية العلوية من الصورة في منتصف العنصر الأفقي.
- `top right`: تضع الزاوية العلوية اليمنى من الصورة في الزاوية العلوية اليمنى من العنصر.
- `center left`: تضع الزاوية اليسرى من الصورة في منتصف العنصر الرأسي.
- `center center`: تضع مركز الصورة في مركز العنصر. (شائع الاستخدام).
- `center right`: تضع الزاوية اليمنى من الصورة في منتصف العنصر الرأسي.
- `bottom left`: تضع الزاوية السفلية اليسرى من الصورة في الزاوية السفلية اليسرى من العنصر.
- `bottom center`: تضع الزاوية السفلية من الصورة في منتصف العنصر الأفقي.
- `bottom right`: تضع الزاوية السفلية اليمنى من الصورة في الزاوية السفلية اليمنى من العنصر.
- قيم رقمية (بالبكسل أو النسبة المئوية):
- `10px 20px`: تحدد أن النقطة المرجعية في الصورة تبعد 10 بكسل من الحافة العلوية و 20 بكسل من الحافة اليسرى للعنصر.
- `50% 50%`: تحدد أن النقطة المرجعية في الصورة تبعد 50% من عرض العنصر من الحافة اليسرى و 50% من ارتفاع العنصر من الحافة العلوية.
- قيمة واحدة:
- `center`: إذا حددت قيمة واحدة فقط، فسيتم تطبيقها على كل من المحورين الأفقي والرأسي. على سبيل المثال، `center` يكافئ `center center`.
مثال:```css
div {
background-image: url("image.jpg");
background-position: center center; /* تضع مركز الصورة في مركز الـ div */
}
```
ملاحظة: إذا كانت صورة الخلفية أصغر من العنصر، فقد تحتاج إلى استخدام خاصية `background-repeat` لتكرار الصورة.
اذا كان لديك إجابة افضل او هناك خطأ اترك تعليق فورآ.
