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

في هذا الفصل، ستتعلم كيفية إضافة عدة صور خلفية إلى عنصر.

ستتعلم أيضًا الخصائص التالية:

  • background-size
  • background-origin
  • background-clip

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

CSS يسمح لك بـ background-image الخصائص تضيف صورة خلفية متعددة إلى عنصر.

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

في المثال التالي هناك صورة خلفية اثنتان، الصورة الأولى هي الزهور (تساوي الأسفل واليمين)، والصورة الثانية هي خلفية الورق (تساوي اليسار والاعلى):

مثال

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

جرب بنفسك

يمكن استخدام صورة الخلفية المتعددة باستخدام خاصية الخلفية المنفردة (كما ذكر سابقًا) أو background قسمة الخصائص لتحديد.

في المثال التالي يستخدم background قسمة الخصائص (النتيجة مشابهة للامثلة السابقة):

مثال

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

جرب بنفسك

CSS 背景尺寸

CSS background-size 属性允许您指定背景图像的大小。

可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

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(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

جرب بنفسك

صورة الخلفية بالحجم الكامل

الآن، نريد أن تكون صورة الخلفية دائمًا تغطي نافذة المتصفح بالكامل.

المتطلبات المحددة كالتالي:

  • ملء الصفحة بالصورة (بدون فجوات)
  • تكبير الصورة حسب الحاجة
  • تسطيح الصورة على الصفحة
  • لا يسبب سكينتيليوم

الآتي يوضح كيفية تحقيق ذلك: باستخدام عنصر <html> (عنصر <html> يكون دائمًا على الأقل طول نافذة المتصفح). ثم ضبط الخلفية لتكون ثابتة ومركزية. وأخيرًا، استخدم خصوصية background-size لتعديل حجمها:

مثال

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

جرب بنفسك

صورة البطل

يمكنك أيضًا استخدام خصائص الخلفية المختلفة في <div> لإنشاء Hero Image (صورة كبيرة تحتوي على نص) وتحديد موقعه حيث تريد.

مثال

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

جرب بنفسك

خصائص background-origin CSS

CSS background-origin يحدد هذا الخصوصية موقع صورة الخلفية.

يستقبل هذا الخصوصية ثلاثة قيم مختلفة:

  • border-box - تبدأ صورة الخلفية من الزاوية العلوية اليسرى للهيكل
  • padding-box - تبدأ صورة الخلفية من الزاوية العلوية اليسرى للملء (الافتراضي)
  • content-box - تبدأ صورة الخلفية من الزاوية العلوية اليسرى للمحتوى

الآتي يوضح background-origin خصائص:

مثال

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

جرب بنفسك

خصائص background-clip CSS

CSS background-clip يحدد هذا الخصوصية منطقة رسم الخلفية.

يستقبل هذا الخصوصية ثلاثة قيم مختلفة:

  • border-box - رسم الخلفية حتى الحافة الخارجية للهيكل (الافتراضي)
  • padding-box - رسم الخلفية حتى الحافة الخارجية للملئ
  • content-box - رسم الخلفية في صندوق المحتوى

الآتي يوضح background-clip خصائص:

مثال

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

جرب بنفسك

خصائص خلفية CSS المتقدمة

خصائص وصف
background خصائص مختصرة لضبط جميع خصائص الخلفية في بيان واحد.
background-clip تحديد منطقة رسم الخلفية.
background-image تحديد صورة خلفية واحدة أو أكثر لعدة عناصر.
background-origin تحديد موقع صورة الخلفية.
background-size تحديد حجم صورة الخلفية.