التعامل مع الصور و css البدايه

[ابن غياث]

من الاشياء اللي كنت اراها صعبه جداً في عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد وكانت عائق امامي الصور في الانماط الانسيابيه كيف يضيفون صوره وكيف يضعونها في مكان محدد ثابته او متحركه من خلال وسم div لماذا اعتمد على الصور في عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد والجداول table اعرف التعامل معها بكل سهوله واقدر اقسم الصفحه ايضا من خلاله بكل سهوله ..

لكن بعد ما عرفت لطريقة الصور في عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد تأكدت انها ضروره ملحه ولابد نقل كامل الصور لها ما عدى الصور اللي عليها روابط تبقى في وسم img اما البقيه المفروض نقلها بكاملها الى ملفات عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد كأنها خلفيه ....

نبدء معكم الشرح بعد المقدمه :

الكود المسؤل عن وضع الخلفيه صوره معروف وموضح نفسه

background-image: url('رابط الصوره هنا');

هل يكفي بعرض الصوره الجواب نعم لكن بدون تنسيق لاننا ما اضفها الارتفاع للصوره والعرض مثلا لدينا صوره ارتفاعها 200 بيكسل وعرضها 300 بيكسل نضيف التالي للكود السابق

	width: 300px;
	height: 200px;

نرجع لنفس السؤال هل يكفي بالطبع لا وهذي جمالية الانماط الانسيابيه تعطيك تحكم كامل باقي علينا ان نحدد هل نريد الصوره مكرره ( اصطلح على تسميتها متمدده ) اذا نضيف للكود السابق هذا الكود اذا نرغب في ثبات الصوره وعدم تكرارها

background-repeat: no-repeat;

راح تكون الصوره بمقاساتها ثابته بدون تكرارا وعكس الامر السابق repeat معناها كرر الصوره في الطول والعرض لانه شامل

background-repeat: repeat;

طيب ما نبي التكرار يكون شامل نبيه بس للعرض اذا نستخدم الكود هذا

background-repeat: repeat-x;

حتى لو كان الارتفاع للكلاس اكبر من ارتفاع الصوره بيكون ثابت طيب نبي العكس التمدد في الارتفاع فقط والعرض يكون نفس الصوره ؟؟

background-repeat: repeat-y;

لاحظتوا جمالها وروعتها والقدره الكبيره في التحكم بالصوره والتصميم عن طريقها

باقي امامنا وسم عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد ممتاز جداً ذكرت لكم سابقا no-repeat عدم تكرار الصور وضعناه لصوره معينه وحنا محتاجين ان الوسم يكون ارتفاعه وعرضه اكبر من الصوره في المثال في الاعلى 200*300 لو كان 400*600 صورة الخلفيه نبيها اسفل على اليسار بكل تأكيد الانماط الانسيابيه تعطيك القدره ايضا فيها باستخدام

background-position: left bottom;

متى تمكنت منها او على الاقل فهمتم اكوادها بيكون الطريق امامكم لاحتراف تصاميم المواقع سهل جداً

ملاحظه = هذي الاكواد بشكله حاليا للتوضيح فقط بالامكان دمجها في كود واحد للتقليل من حجم ملف عزيزى العضو \ الزائر لايمكنك مشاهده الروابط الا بعد الرد وهذا مفيد لتسريع تصفح الموقع لكن الشرح هذا بدايه فقط للتعامل بشكل سليم وسلس ومعرفة الاكواد والتعامل معها

اتمنى يفيدكم الشرح

[خضر2003]