خلفيات CSS3
CSS3 يحتوي على بعض الخصائص الخلفية الجديدة، والتي تسمح للسيطرة أكبر للعنصر الخلفية.
في هذا الفصل سوف تتعلم كيفية إضافة صور متعددة الخلفية لعنصر واحد.
سوف تتعلم أيضا عن خصائص CSS3 الجديدة التالية:
-
background-size -
background-origin -
background-clip
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
أرقام تليها -webkit-, -moz- ، أو -o- تحدد النسخة الأولى التي عملت مع بادئة.
| الملكية | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
خلفيات متعددة CSS3
CSS3 يسمح لك بإضافة صور متعددة الخلفية لعنصر، من خلال background-image الملكية.
يتم فصل الصور خلفية مختلفة بينها فواصل، ومكدسة الصور فوق بعضها البعض، حيث الصورة الأولى هي الأقرب إلى المشاهد.
المثال التالي اثنين من الصور الخلفية، الصورة الأولى هي زهرة (محاذاة إلى الأسفل واليمين) والصورة الثانية هي خلفية ورقة (الانحياز إلى الزاوية العليا اليسرى):
مثال
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} انها محاولة لنفسك » صور خلفية متعددة يمكن تحديد باستخدام خصائص الخلفية الفردية (كما سبق) أو background الخاصية المختصرة.
يستخدم المثال التالي background الخاصية المختصرة (نفس نتيجة المثال أعلاه):
مثال
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} انها محاولة لنفسك » CSS3 خلفية الحجم
وCSS3 background-size الملكية يسمح لك لتحديد حجم الصور الخلفية.
قبل CSS3، كان حجم صورة خلفية الحجم الفعلي للصورة. CSS3 يتيح لنا إعادة استخدام الصور الخلفية في سياقات مختلفة.
حجم يمكن أن تكون محددة في الأطوال والنسب، أو باستخدام واحدة من كلمتين رئيسيتين: تحتوي أو غطاء.
تغيير حجم المثال التالي صورة خلفية لأصغر بكثير من الصورة الأصلية (باستخدام بكسل):
صورة خلفية الأصلي:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
صورة الخلفية حجمها:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
هنا هو رمز:
مثال
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
انها محاولة لنفسك » وهما القيم الأخرى المحتملة ل background-size و contain و cover .
و contain الكلمة موازين صورة الخلفية لتكون كبيرة بقدر الإمكان (ولكن كل من عرضه وارتفاعه يجب أن تناسب داخل منطقة المحتوى). على هذا النحو، اعتمادا على نسب الصورة الخلفية ومنطقة المواقع الخلفية، قد يكون هناك بعض المناطق الخلفية التي لا تغطيها صورة الخلفية.
و cover الكلمة موازين صورة الخلفية بحيث يتم تغطية منطقة المحتوى تماما من صورة الخلفية (كلا العرض والارتفاع متساوية أو يتجاوز منطقة المحتوى). على هذا النحو، وبعض أجزاء من صورة الخلفية قد لا تكون واضحة في مجال تحديد المواقع الخلفية.
يوضح المثال التالي استخدام contain و cover :
مثال
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
انها محاولة لنفسك » تحديد أحجام الصور الخلفية متعددة
و background-size يقبل الملكية أيضا قيم متعددة لحجم الخلفية (باستخدام قائمة مفصولة بفواصل)، عند العمل مع خلفيات متعددة.
المثال التالي وثلاث صور خلفية المحددة، مع مختلف background-size قيمة كل صورة:
مثال
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} انها محاولة لنفسك » كامل الحجم صورة الخلفية
الآن نحن نريد أن يكون صورة خلفية على موقع على شبكة الانترنت التي تغطي نافذة المتصفح بالكامل في جميع الأوقات.
المتطلبات هي كما يلي:
- ملء صفحة كاملة مع صورة (أي مساحة بيضاء)
- صورة نطاق وحسب الحاجة
- صورة المركز على الصفحة
- لا تسبب التمرير
يوضح المثال التالي كيفية القيام بذلك. استخدام عنصر أتش تي أم أل (العنصر أتش تي أم أل هو دائما ما لا يقل عن ذروة نافذة المتصفح). ثم ضبط خلفية ثابتة، وتركزت على ذلك. ثم ضبط حجمها مع background-size الملكية:
مثال
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} انها محاولة لنفسك » CSS3 background-origin الملكية
وCSS3 background-origin تحدد الخاصية حيث يتم وضع صورة الخلفية.
الخاصية يأخذ ثلاث قيم مختلفة:
- border-box - تبدأ صورة الخلفية من الزاوية اليسرى العليا من الحدود
- padding-box - (افتراضي) تبدأ صورة الخلفية من الزاوية العليا اليسرى من حافة الحشو
- content-box - تبدأ صورة الخلفية من الزاوية اليسرى العليا من المحتوى
يوضح المثال التالي background-origin الملكية:
مثال
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
انها محاولة لنفسك » CSS3 background-clip الملكية
وCSS3 background-clip تحدد الخاصية في منطقة اللوحة الخلفية.
الخاصية يأخذ ثلاث قيم مختلفة:
- border-box - (الافتراضي) هي التي رسمت خلفية حافة خارج الحدود
- padding-box - هي التي رسمت خلفية الحافة الخارجية من الحشو
- content-box - الخلفية هي التي رسمت داخل مربع المحتوى
يوضح المثال التالي background-clip الملكية:
مثال
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
انها محاولة لنفسك » اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »
خصائص CSS3 الخلفية
| الملكية | وصف |
|---|---|
| background | خاصية الاختزال لوضع كافة الخصائص الأساسية في إعلان واحد |
| background-clip | تحدد منطقة اللوحة الخلفية |
| background-image | يحدد واحدة أو أكثر من الصور الخلفية لعنصر |
| background-origin | يحدد أين هو / يتم وضع صورة الخلفية (الصورة) |
| background-size | يحدد حجم الصورة الخلفية (الصورة) |