CSS3 Modules

css3 background image

آخر تحيين: 09-10-2014

css3 background gradient html5 الصوت و الفيديو


بالإضافة إلى خاصيات الخلفيات التي تعرفنا عليها سابقا ، توفر لنا لغة css3 خاصيات جديدة للتحكم بشكل جيد في الصّور ، كما تتيح لنا أيضا إمكانية إضافة أكثر من صورة للخلفية في الوقت نفسه .
بعض هذه الخاصيات :

  • background-size
  • background-origin
  • background-clip
رقم إصدارات المتصفحات التي بدأت تدعم الخاصيات
الخاصية
background-size4.0
-webkit- 1.0
4.0
-moz- 3.6
4.1
-webkit- 3.0
10.5
-o- 10.0
9.0
background-origin1.04.03.010.59.0
background-clip4.04.03.010.59.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -o- , -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

background-size

تتيح لنا الخاصية "background-size" التحكم في حجم الصورة ، و ذلك من أجل استعمال نفس الصورة في المحتوى بأحجام مختلفة حسب الحاجة :

.pic{
    background: url(grasses.png);
    background-size: 150px 60px;
    background-repeat: no-repeat;
}
معاينة النتيجة

لجعل الصورة مرنة لكي تحتل كل خلفية المحتوى المعني . نضيف القيم بالنسبة المؤية بدل البيكسل

.pic{
    background: url(grasses.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
معاينة النتيجة

إضافة أكثر من صورة للخلفية

لإضافة أكثر من صورة لنفس الخلفية ، نفصل بين الصور بعلامة ","

.pic{
    background: url(trees.png),url(grasses.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
معاينة النتيجة

CSS3 background-origin

تقوم الخاصية "background-origin" بتحديد مكان وضع صورة الخلفية .
يمكننا وضع صورة الخلفية في ثلاث أمكنة نسبة إلى علبة المحتوى :

  1. border-box : على حدود العلبة
  2. padding-box : في الهوامش الداخلية للعلبة
  3. content-box : خلف محتوى العلبة


مثال لإضافة الخلفية لمحتوى العلبة

.pic {
   background: url(leafs.png);
   background-size: 100% 100%;
   background-origin: content-box;
   background-repeat: no-repeat;
}

أمثلة أخرى :

معاينة النتيجة

background-clip

تقوم بتحديد مكان الخلفية الذي سيتم تلوينه

.back {
    background-color: orange;
    background-clip: content-box;
}
معاينة النتيجة

يمكننا إعطاء الخاصية "background-clip" القيم التالية

القيمةالشرحمعاينة النتيجة
border-boxالقيمة المبدئية ، يتم تلوين الخلفية إلى حدود العلبةمعاينة النتيجة
padding-boxيتم تلوين الخلفية إلى حدود الهوامش الداخليةمعاينة النتيجة
content-boxيتم تلوين الخلفية إلى حدود محتوى العلبةمعاينة النتيجة
initialيتم تلوين محتوى العلبة . مع الإحتفاظ باللون المبدئي للوسوم التي نعطيها قيمة initialمعاينة النتيجة
inheritيتم تلوين محتوى العلبة إلا الوسوم التي سنعطيها القيمة inherit
inherit = تعني أن الوسم الذي سيأخذ هذه القيمة لن يأخذ قيمة النمط الأصلي لنفس الوسم ، بل سيرث قيمة نمط الوسم الأب

سأعطيكم مثالين لقيمتي initial و inherit على بعض الوسوم حتى تعوها جيدا :

INITIAL : تُرجع الخاصية المعنية لقيمتها المبدئية

initial : لا يتم التعرف عليها من طرف متصفح internet explorer

.mydiv {
    color: red;
}
h1 {
    color: initial;
}
معاينة النتيجة
بالنسبة للقيمتين initial و inherit يمكننا تطبيقهما على جميع خاصيات css و على جميع وسوم html

INHERIT : تعني أن الوسم الذي سيأخذ هذه القيمة لن يأخذ قيمة النمط الأصلية لنفس الوسم ، بل سيرث قيمة نمط الوسم الأب

span {
    color: red;
    border: 1px solid black;
}
.inherited span {
    color: inherit;
}
معاينة النتيجة