في هذا الدرس 7تصفّح المواضيع
تًستخدم خاصية background-size في التحكم في أبعاد ( طول وعرض ) صور الخلفيات في لغة CSS, يجب أن يتم تعيين عرض وطول صورة الخلفية مقارب إلي حجم الصورة الأصلي.
- يجب أن تُستخدم خاصية background-image لكي تعمل خاصية background-size.
قيم خاصية background-size:
- auto وهي القيمة الأفتراضية وهي عرض صورة الخلفية بالحجم الطبيعي.
- length وهي عرض أبعاد ( طول وعرض ) الصورة بوحدة pixel بكسل.
- percentage وهي عرض أبعاد ( طول وعرض ) الصورة بالنسبة المئوية %.
- cover ضبط الخلفية بحجم container العنصر التي تتفرع منه الخلفية.
- contain يتم تعيين صورة الخلفية علي أساس ظهور كامل للرسمة الداخلية للصورة.
- initial إعادة ضبط أبعاد صورة الخلفية إلي الحجم الطبيعي.
- inherit هي توريث حجم الصورة من عنصر الأب parent.
background-size:auto|length|percentage|cover|contain|initial|inherit;عن طريق إسخدام القيمة auto مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) صور الخلفيات في لغة CSS للحجم الطبيعي للصورة الخلفية.
CSS background auto size
تظهر الصورة كما هي في الوضع الطبيعي بأستخدام قيم auto مع خاصية background size.
body
{
background-image: url("https://www.closetag.com/images/background.jpg");
background-size:auto;
}عن طريق إسخدام القيمة pixel مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) بحجم محدد في لغة CSS.
- يمكن التحكم في طول وعرض بقيم مختلفة وهي كتابة قيمتين في خاصية background-size لتصبح ;background-size:300px 500px حيث أن القيمة الأولي للعرض والثانية للطول.
CSS background length size
تظهر الصورة بحجم محدد بأستخدام قيم وحدة pixel مع خاصية background size.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:200px;
}CSS background size height and width
يتم تعيين قيميتين مع خاصية background-size فيمة للعرض وقيمة للطول.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:400px 200px;
}عن طريق إسخدام القيمة percentage مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) بحجم محدد بالنسبة المئوية في لغة CSS.
- يمكن التحكم في طول وعرض بقيم مختلفة وهي كتابة قيمتين في خاصية background-size لتصبح ;background-size:100% 70% حيث أن القيمة الأولي للعرض والثانية للطول.
CSS background percentage size
تظهر الصورة بحجم محدد بأستخدام قيم وحدة pixel مع خاصية background size.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:50%;
}CSS background size percentage height and width
يتم تعيين قيميتين مع خاصية background-size قيمة للعرض وقيمة للطول بالنسبة المئوية.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:100% 70%;
}عن طريق إسخدام القيمة contain مع خاصية background-size فسوف يقيس المتصفح الصورة بأكبر قدر ممكن داخل حاويتها بدون إقتصاص الصورة أو تمديدها. إذا كانت الحاوية أكبر من الصورة، فسيؤدي ذلك إلى تقسيم الصورة علي المساحة.
CSS background without contain size
تظهر الصورة بحجم محدد مختلف عن حجم قيمة contain لاحظ بدون قيمة contain.
CSS background contain size
عن طريق قيمة contain مع background-size سوف يتم ظهور الصورة بكشل مختلف عن الوضع الطبيعي
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:contain;
}عن طريق إسخدام القيمة cover مع خاصية background-size فسوف يتم ملئ مساحة الحاوية container التي يتفرع منها خلفية الصورة يعني العنصر الأب parent element.
CSS background without cover size
تظهر الصورة بدون ملئ الشاشة بدون قيمة cover مع CSS background size.
CSS background cover size
تظهر الصورة بملئ الشاشة بإستخدام قيمة cover مع CSS background size.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:cover;
}عن طريق إسخدام القيمة initialمع خاصية background-size فسوف يتم إرجاء حجم الخلفية كما كان في الحجم الأفتراضي.
CSS background initial size
إعادة الخلفية للحجم الطبيعي قبل إستخدام قيمة cover.
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:cover;
background-size:initial;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.