في هذا الدرس 4تصفّح المواضيع
عن طريق خاصية background-position يتم التحكم في موقع صوره الخلفية على المتصفح سواء يساراُ أو يميناُ أو أوسط الصفحة أو أعلاها أو أسفل الصفحة.
قيم خاصية background-position:
- keywords وهي عبارة عن موقع صورة الخلفية علي المتصفح يمكن إستخدام القيم التالية:
[left top,left center,left bottom,right top,right center,right bottom,center top,center center,center bottom,left,center,right,top,bottom].
- percentage وهي إستخدام قيميتين 50% 100% محور X ومحور Y موقع الصورة عمودي ورأسي بالنسبة المئوية.
- length وهي إستخدام قيميتين 100px 200px محور X ومحور Y موقع الصورة عمودي ورأسي بوحدة بكسل pxiel.
background position syntax
طريقة كتابة خاصية background position.
background-position: value;تحريك صورة الخلفية بالنسب المئوية مع محور X ومحور Y أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
CSS Background Position Percentage
موقع الصورة يمين ويسار بالنسبة المئوية.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: 25% 40%;
height:1000px;
}تحريك صورة الخلفية بوحدة pixel بكسيل مع محور X ومحور Y أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
CSS Background Position length
موقع الصورة يمين ويسار بوحدة بيكسيل.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: 200px 300px;
height:1000px;
}تحريك صورة الخلفية عن طريق إستخدام كلمات مفتاحية أفقياً ورأسياً تكون القيم من اليسار إلي اليمين:
- X القيمة الأولي موقع الصورة يميناً ويساراً.
- Y القيمة الثانية موقع الصورة لأعلي ولأسفل.
background-postion keywords:
[left top,left center,left bottom,right top,right center,right bottom,center top,center center,center bottom,left,center,right,top,bottom].
CSS Background Position right
موقع الصورة يمين عن طريق right keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: right;
}CSS Background Position center
موقع الصورة في المنتصف عن طريق centerkeyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: center;
}CSS Background Position left
موقع الصورة في اليسار عن طريق left keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: left;
}CSS Background Position right bottom
موقع الصورة في يميناً مع موقع الصورة في الأسفل عن طريق right bottom keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: right bottom;
height:800px;
}CSS Background Position center bottom
موقع الصورة في بالأسفل مع موقع الصورة في المنتصف عن طريق center bottom keyword.
body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat: no-repeat;
background-position: center bottom;
height:800px;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات8
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Position موقع / وضعية
- للمراجعة
- 02 Background خلفية
- للمراجعة
- 03 Property خاصية
- للمراجعة
- 04 Value قيمة
- للمراجعة
- 05 Top أعلي
- للمراجعة
- 06 Right يمين
- للمراجعة
- 07 Left يسار
- للمراجعة
- 08 Percentage نسبة مئوية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات2
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 02 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.