Theme
Primary Color
أكاديمية الزيرو

الدرس 21

اختصار خواص الخلفية باستخدام background

معنى المصطلحات

المعنىStand ForName
طريقة مختصرة لكتابة أكتر من خاصية مع بعضShorthand

بدل ما نكتب كل خاصية للخلفية في سطر لوحدها نقدر نجمعهم باستخدام background خلينا نقارن الطريقتين بنفس النتيجة

كل خاصية لوحدها

استخدم صورة landscape.jpg الموجودة داخل images وحط العنصر ده مكان مثال التجربة

<div class="box">Background Shorthand</div>
.box {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  background-image: url("../images/landscape.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-attachment: scroll;
}

الصورة بتظهر كاملة في المنتصف من غير تكرار واللون ظاهر في المساحة اللي الصورة مش مغطياها

نفس التنسيق باختصار

استبدل كود التنسيق السابق بالمثال ده

.box {
  width: 300px;
  height: 300px;
  background: lightgray url("../images/landscape.jpg") center / contain no-repeat scroll;
}
  • ال lightgray لون الخلفية
  • ال url بتحدد مصدر الصورة
  • ال center مكان الصورة
  • ال contain حجم الصورة
  • ال no-repeat بتوقف التكرار
  • ال scroll بتحدد حركة الخلفية

المكان قبل الحجم

لما تكتب الحجم في الاختصار لازم ييجي بعد المكان وبينهم علامة / زي center / contain العلامة هنا بتفصل المكان عن الحجم

لو عاوز تغير اللون بس

استخدم background-color علشان تغير اللون وتسيب باقي إعدادات الخلفية زي ما هي

.box {
  background-color: yellow;
}

لكن لو كتبت background: yellow هترجع خواص الخلفية اللي مكتبتهاش لقيمها الافتراضية ومنها background-image اللي هتبقى none فتختفي الصورة

جرب بنفسك

غير contain إلى cover داخل الاختصار ثم جرب right bottom بدل center وشوف تأثير كل تغيير لوحده

آخر تعديل للدرس: