دروس دورة CSS : شرح خاصية background-size في CSS3 xml css html
السلام عليكم ..
اليوم إن شاء الله سوف نقوم بشرح خاصية جميلة جداً من خواص تقنية CSS3 وهي backgroungd-size او مقاس الخلفية .
في اولى دروسنا شرحنا كيفية عمل صفحة html تجريبية لنقوم بتطبيق ما نفعله على المتصفح ولمن لم يقوم بإنشاءها فليشاهد هذا الموضوع من ( هنا )
كما ذكرنا شرحنا حول الخاصية ..
background-sizeوهي خاصبة من خلالها تستطيع التحكم في ابعاد اي صورة في الخلفية او في خلفية صفحة معينة ودعونا نقوم بمثال على ذلك.
افتح صفحة html و ضع فيها هذا الكود:
<!DOCTYPE html>الصورة , الخاصية التي نشرحها , عدم تكرار الصورة , جعل الصورة في المنتصف تماماً
<html>
<head>
<style>
div{
background:url("http://im40.gulfup.com/gRLLH.png");
background-size:200px 120px;
background-repeat:no-repeat;
background-position:center;
background-color:#D1FFFF;
border:5px dotted #0000FF;
width:267px;
padding:20px;
color:#111;
}
</style>
</head>
<body>
<div>
MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR />
</div>
</body>
</html>
ملاحظة هامة جداً : حتى يعمل كود قياس الصورة background-size لابد أن يكون وراء الصورة مباشرتاً كما بالكود السابق
ثم احفظ الصفحة وافتحها على المتصفح لتجد التالي :
 |
| انظر الصورة !! هذا هو حجمها الطبيعي والذي قُمت بتحديده من خلال الخاصية background-size |
<!DOCTYPE html>والان انظر للصورة ..
<html>
<head>
<style>
div{
background:url("http://im40.gulfup.com/gRLLH.png");
background-size:100px 60px;
background-repeat:no-repeat;
background-position:center;
background-color:#D1FFFF;
border:5px dotted #0000FF;
width:267px;
padding:20px;
color:#111;
}
</style>
</head>
<body>
<div>
MiniSoftware<BR />By Ahmad Saleh<BR /><BR /><BR /><BR /><BR /><BR />
</div>
</body>
</html>
 |
| تم تصغير الصورة التي في المنتتصف ,, |
الصورة اصلاة مقاسها 200 عرض × 120 ارتفاع , في الكود الأخير جعلناها 100 عرض × 60 ارتفاع ومن هنا نستنتج أن الكود هذا ,,
background-size:100px 60px;طالما يحتوي على رقمين وهما 100px و 60px إذاً فالرقم الأول هو العرض , والرقم الآخير هو الإرتفاع .
يمكنك ايضاً ان تجعل العرض مثل الإرتفاع وهذا بكتابة رقم واحد مثال الكود التالي ..
background-size:100px;هكذا اصبحت الصورة عرضها كارتفاعها .
هذا ما لدينا اليوم من شرح لهذه الخاصية الجميلة , وبهذا قد انتهى موضوعنا
نراكم على خير في شرح جديد والسلام عليكم
التعليقات