دروس دورة CSS : شرح الخاصية background-origin في CSS3 xml html css
بسم الله , الحمد لله
في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملونة , اما درسنا اليوم هو لخاصية جميلة قريبة جداً من الخاصية السابقة ولكم هذه المرة لن يكون التحكم في اللون بل في الصورة التي هي في الخلفية..
درسنا اليوم حول الخاصية background-origin والتي هي اشبه كثيراً بالخاصية background-clip وهذا ما سوف نتعرف عليه من خلال شرحنا لهذا اليوم ,,
قُم بتجهيز صفحة html ولمن لم يرى كيف نقوم بتجهيزها فإليك الرابط ( هنا )
والآن نبدأ شرحنا على بركة الله:
كما ذكرنا شرحنا حول خاصية
background-origin
وهو كود يتحكم في موضع الصورة التي في الخلفية , يتفرع من هذه الخاصية ثلاثة أكود وهما :
ونبدأها بشرح الخاصية background-origin: border-boxbackground-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
افتح محرر النصوص على صفحة html المتفق عليها ثم انسخ بها هذا الكود :
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 270px;
border: 6px dotted #000;
padding: 35px;
background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');
background-repeat: no-repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<div>
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
</div>
</body>
</html>
وعند تطبيق هذا الكود على المتصفح سنجد الصورة كالتالي ..
 |
| الكود المستخدم في هذه الصورة هو background-origin:border-box انظر الآن الى الصورة ( صورة الوجة المبتسم ) تجدها على الحدود وهذا ما تم تطبيقه من خلال الكود border-box |
افتح محرر النصوص على صفحة html المستخدمة و الصق فيها هذا الكود :
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 270px;
border: 6px dotted #000;
padding: 35px;
background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<div>
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
</div>
</body>
</html>
وعند تطبيق الكود وعرضه على المتصفح يكون هكذا
 |
| انظر ( الوجة المبتسم ) تجده وقد اصبح في الجزء الفارغ والذي يُسمى padding وهذا ما تم تطبيقه بواسطة الكود background-origin:padding-box |
و الان نشرح الخاصية الأخيرة وهي background-origin: content-box وهي تعني ان تكون الصورة داخل المحتوى , اي الكتابة
وهذا ما سوف نقوم بعمله الآن , افتح محرر النصوص على صفحة html والصق هذا الكود :
وبعد تطبيق هذا الكود على المتصفح سوف نجد الصورة قد اصبحت هكذا ..<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 270px;
border: 6px dotted #000;
padding: 35px;
background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<div>
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
Mini Software Mini Software Mini Software<BR />
</div>
</body>
</html>
 |
| تم دمج الصورة ( الوجة المبتسم ) داخل المحتوى content وهذا ما تم بعمله بالكود background-origin:content-box |
وذلك بإضافته للأكواد السابقة , مثال على ذلك :background-position: left;
ويكون هكذا في المتصفحdiv{
width: 270px;
border: 6px dotted #000;
padding: 35px;
background: #FFC2D6 url('http://im31.gulfup.com/KCsoG.png');
background-repeat: no-repeat;
background-origin: padding-box;
background-position: left;
}
بالطبع هذا ليس كل شئ فيمكنك تغيير الإتجاه left الى right او center وكلما طبقت خطوات كلما اكتشفت المزيد والمزيد
والى هنا ينتهي شرحي لهذه الخاصية الجميلة ,, اترككم في امان الله والى لقاء آخر قريب إن شاء الله
التعليقات