حتي يمكنك التحكم في حجم الصورة لابد ان يتم استخدام قاعدة width و قاعدة height
وذلك من خلال وجود كود html حيث يمكنك ادراج صورة مع استعمال خاصية class تحت مسمى large
وكذلك كود css حتى يمكنك التحكم في الصورة لابد ان يكون بهذا الشكل:
1- التوجيه او Aligning
تلك الخطوة التي يتم من خلالها توجيه الصورة والذي يحتمل احدى الخيارات يمينا او يسارا وذلك باستخدام قاعدة float
ويكون لدينا كود html ليمكننا من ادراج الصورة مع استخدام خاصية class تحت مسمى large
2- التوسيط centering
ولان الصور تعتبر من اهم العناصر التي تقوم باتباع قاعدة inline والذي يوضح انه في حالة وضع الصورة فانها تقوم باتخاذ مكانها بجانب احدى الفقرات النصية مثلا وحتى يتم جعل الصورة في الوسط لابد من تحويلها لعنصر block ليمكنك ذلك من التحم في الصورة ووضعها في الوسط
كود html
كود html
<img src="photo.png" class="mylogo"/>
كود css
img.mylogo{
display: block;
margin: 0 auto;
}
3- استخدام الصورة كخلفية
من الجدير بالذكر ايضا انه يمكنك استخدام الصور كخلفيات بلغة css
واليكم الطريقة بالتفاصيل :
body {
background-image: url("pattern.gif");
}
}
يمكن التحكم غي الخلفية بعدة طرق ومن اهم تلك القواعدالخلفية :
Background-repeat والتي تحتمل الخيارات التالية:
repeat إعادة الخلفية
repeat-x أفقيا
repeat-y عموديا
no-repeat عدم إعادة الخلفية
كود css:
كود css:
body {
background-image: url("pattern.gif");
Background-repeat: repeat;
}
}
background-attachement وتحتمل الخيارات التالية:
fixed وتعني لا تتحرك
scroll تعني انها تتحرك مع النزول لأسفل الصفحة
كود css:
كود css:
body {
background-image: url("pattern.gif");
background-attachement: fixed;
}
}
background-position
left top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل
كود css:
ويمكنك ايضا استخدام النسبة المئوية
x% y% القيمة الأولى افقيا والثانية عموديا
أو البيكسلز px
10px 50px
مواضيع ذات صلة :
درس مهم جدا عن النصوص في لغة css
اهم دروس لغة css نظام الصندوق CSS Boxesleft top يسار أعلى
left center يسار وسط
left bottom يسار اسفل
right top يمين أعلى
right center يمين وسط
right bottom يمين اسفل
center top وسط أعلى
center center وسط
center bottom وسط أسفل
كود css:
body {
background-image: url("pattern.gif");
background-position: top left;
}
}
ويمكنك ايضا استخدام النسبة المئوية
x% y% القيمة الأولى افقيا والثانية عموديا
أو البيكسلز px
10px 50px
مواضيع ذات صلة :
درس مهم جدا عن النصوص في لغة css
تعريفات الالوان في لغة css
