دروس دورة CSS : شرح الخاصية background-origin في CSS3

بسم الله , الحمد لله

في الدرس الماضي أخذنا شرح خاصية background-clip و فهمنا ماهية عملها وكانت ممتعة حقاً , وهي التحكم بمساحة الخلفية الملونة , اما درسنا اليوم هو لخاصية جميلة قريبة جداً من الخاصية السابقة ولكم هذه المرة لن يكون التحكم في اللون بل في الصورة التي هي في الخلفية..

درسنا اليوم حول الخاصية background-origin والتي هي اشبه كثيراً بالخاصية background-clip وهذا ما سوف نتعرف عليه من خلال شرحنا لهذا اليوم ,,

قُم بتجهيز صفحة html ولمن لم يرى كيف نقوم بتجهيزها فإليك الرابط ( هنا )

والآن نبدأ شرحنا على بركة الله:

كما ذكرنا شرحنا حول خاصية

background-origin

وهو كود يتحكم في موضع الصورة التي في الخلفية , يتفرع من هذه الخاصية ثلاثة أكود وهما :

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

ونبدأها بشرح الخاصية background-origin: 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: 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

والآن نشرح الخاصية background-origin: padding-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;
}

ويكون هكذا في المتصفح