القيمة <image>

نوع البيانات <image> في CSS يستعمل لتمثيل صورة ثنائية الأبعاد؛ وهنالك نوعان من الصور: الصور التقليدية التي يُشار إليها عادةً باستخدام رابط URL، والصور المولّدة ديناميكيًا، مثل التدرجات اللونية <gradient>.

يمكن استخدام القيمة <image> مع عدد كبير من خاصيات CSS مثل background-image و border-image و content و list-style-image و cursor.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Safari	Opera
<url>	مدعومة	مدعومة	مدعومة	مدعومة	مدعومة
<gradient>	26.0	16.0	10.0	6.1	12.1

أنواع الصور

يمكن أن تتعامل CSS مع أنواع الصور الآتية:

• الصور التي لها أبعاد فعلية، مثل صورة JPEG أو PNG أو غيرها من الصور النقطية.
• الصور التي لها عدِّة أبعاد فعلية، أي توجد عدِّة نسخ من الصورة داخل ملف واحد، كما في بعض صيغة ico (وفي هذه الحالة ستكون أبعاد الصورة الفعلية هي أبعاد أكبر صورة لها نسبة أبعاد [aspect ratio] أقرب ما يمكن إلى العنصر الذي يحتويها).
• الصور التي ليس لها أبعاد فعلية، لكن لها نسبة أبعاد (aspect ratio) مُحدِّدة بين طولها وعرضها، كما في صورة SVG أو غيرها من الصيغ المتجهية.
• الصور التي ليس لها أبعاد فعلية وليس لها نسبة أبعاد محددة، مثل التدرجات اللونية في CSS.

يمكن أن تُحدِّد أبعاد الصورة في CSS عبر الأبعاد الفعلية، ثم عبر الأبعاد المُحدَّدة عبر خاصيات CSS مثل width أو height أو background-size، ثم عبر الأبعاد الافتراضية التي تعتمد على نوع الخاصية التي ستستخدم الصورة معها:

الخاصية	الحجم الافتراضي للصورة
background-image	أبعاد مساحة خلفية العنصر المعيّن.
list-style-image	حجم محرف بقياس 1em.
border-image	أبعاد مساحة إطار العنصر.
cursor	الحجم الذي يُطابِق حجم المؤشر في نظام التشغيل المستخدم.

تُحسب الأبعاد المعروضة للصورة عبر تطبيق الخوارزمية الآتية:

• إذا حُدِّدَ الطول والعرض، فستستخدم هذه القيم كأبعاد الصورة المعروضة.
• إذا حُدِّدَ العرض فقط أو الطول فقط، فستُحدَّد القيمة الناقصة من نسبة الأبعاد الفعلية للصورة، أو ستُستخدَم الأبعاد الفعلية إن طابقت الأبعاد المُحدَّدة، أو ستُستخدَم الأبعاد الافتراضية للعنصر.
• إذا لم يُحدَّد لا العرض ولا الطول، فستكون الأبعاد المعروضة للصورة تساوي الأبعاد الفعلية للصورة على ألّا تتعدى أبعاد العنصر الذي ستُطبَّق عليه.

ملاحظة: لا تدعم كل المتصفحات جميع صيغ الصور في كل الخاصيات.

القيم

يمكن تمثيل القيمة <image> بإحدى الطرائق الآتية:

• صورة مُعرَّفة باستخدام نوع البيانات <url> عبر الدالة url()‎.
• تدرج لوني مُحدَّد عبر نوع البيانات <gradient>.

أمثلة

أمثلة صحيحة عن تحديد مسار الصورة باستخدام الدالة url()‎، وتحديد تدرج لوني <gradient> باستخدام الدالة linear-gradient()‎:

url(test.jpg)
linear-gradient(blue, red)

أمثلة غير صحيحة عن تحديد مسار إحدى الصور دون استخدام الدالة url()‎، واستخدام الدالة url()‎ للإشارة إلى ملف لا يُمثِّل صورةً:

cervin.jpg
url(report.pdf)

مصادر ومواصفات

• مسودة CSS Image Values and Replaced Content Module Level 4، أضافت element()‎، و image()‎، و  conic-gradient()‎، و repeating-conic-gradient()‎، و image-resolution.
• مواصفة CSS Image Values and Replaced Content Module Level 3، قبل CSS3 لم يكن هنالك نوع بيانات باسم <image>، وإنما كانت تُعرَّف الصور باستخدام الدالة url()‎ فقط.