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