خلفيات CSS3 (Background)

باستخدام CSS3، يمكنك تطبيق خلفيات متعددة على العنصر.

استخدام خلفية CSS3

قدم CSS3 عدة خصائص جديدة ل操纵 الخلفية للعناصر، مثل剪切 الخلفية، عدة خلفيات، وتحديد حجم الخلفية.

في القسم التالي سيتم تقديم جميع الميزات الجديدة الخاصة بخلفية CSS3، لمعرفة المزيد عن الخصائص المتعلقة بالخلفية، يرجى الرجوع إلىخلفية CSSالدليل.

CSS3 attribute background-size

يمكن استخدام attribute background-size لتحديد حجم الصورة الخلفية. قبل CSS3، كان حجم الصورة الخلفية يحدده حجم الصورة الفعلية. يمكن تحديد حجم الصورة الخلفية باستخدام الوحدات البكسلية أو النسبة المئوية، وكلمات مفتاحية مثل auto،contain وcover. لا يمكن استخدام القيم السلبية.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　background:　url("images/sky.jpg")　no-repeat;
　　　　background-size:　contain;
　　　　border: 6px solid #333;
}

CSS3 attribute background-clip

يمكن استخدام attribute background-clip لتحديد ما إذا كانت الخلفية للعنصر تتمدد إلى الحدود. يمكن أن تأخذ attribute background-clip ثلاثة قيم: border-box،padding-box،content-box.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　dashed　#333;
　　　　background: orange;
　　　　background-clip: content-box;
}

يرجى الرجوعنموذج الصندوق CSSالدليل، لمعرفة المزيد عن مربع العنصر.

CSS3 attribute background-origin

属性background-origin يمكن استخدامها لتحديد منطقة التوضيح للصورة الخلفية. يمكن أن تأخذ نفس القيم مثل attribute background-clip: border-box،padding-box،content-box.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px　dashed　#333;
　　　　background:　url("images/sky.jpg")　no-repeat;
　　　　background-size:　contain;
　　　　background-origin:　content-box;
}

خلفيات متعددة CSS3

CSS3 يتيح لك إضافة عدة خلفيات إلى عنصر واحد. تتداخل الخلفيات مع بعضها البعض. عدد الطبقات محدد منbackground-imageأو backgroundعدد القيم المفصولة بالكوماس في السمة المختصرة يحدد.

.box　{
　　　　width:　100%;
　　　　height:　500px;
　　　　background:　url("images/birds.png")　no-repeat　center,　　url("images/clouds.png")　　no-repeat　center,　lightblue;
}

القيمة الأولى في قائمة النقاط المفصولة بالكوماس من خلفية (أيbackground-image“birds.png”）سيظهر في الأعلى، بينما سيظهر القيمة الأخيرة (أي لون lightblue) في الأسفل. يمكن أن تحتوي الأخيرة فقط علىbackground-color.