الفرق بين المراجعتين لصفحة: «CSS/image»
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 71: | سطر 71: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== مصادر ومواصفات == | == انظر أيضًا == | ||
*صفحة القيمة <code>[[CSS/gradient|gradient]]</code> وهو نوعٌ خاصٌ من الصور <code>[[CSS/image|<image>]]</code> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر. | |||
==مصادر ومواصفات== | |||
* مسودة [https://drafts.csswg.org/css-images-4/#typedef-image CSS Image Values and Replaced Content Module Level 4]، أضافت <code>element()</code>، و <code>image()</code>، و <code>conic-gradient()</code>، و <code>repeating-conic-gradient()</code>، و <code>image-resolution</code>. | * مسودة [https://drafts.csswg.org/css-images-4/#typedef-image CSS Image Values and Replaced Content Module Level 4]، أضافت <code>element()</code>، و <code>image()</code>، و <code>conic-gradient()</code>، و <code>repeating-conic-gradient()</code>، و <code>image-resolution</code>. | ||
* مواصفة [https://drafts.csswg.org/css-images-3/#typedef-image CSS Image Values and Replaced Content Module Level 3]، قبل CSS3 لم يكن هنالك نوع بيانات باسم <code><image></code>، وإنما كانت تُعرَّف الصور باستخدام الدالة <code>url()</code> فقط. | * مواصفة [https://drafts.csswg.org/css-images-3/#typedef-image CSS Image Values and Replaced Content Module Level 3]، قبل CSS3 لم يكن هنالك نوع بيانات باسم <code><image></code>، وإنما كانت تُعرَّف الصور باستخدام الدالة <code>url()</code> فقط. | ||
[[تصنيف:CSS|{{SUBPAGENAME}}]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Data Type|{{SUBPAGENAME}}]] | [[تصنيف:CSS Data Type|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 14:46، 25 أكتوبر 2018
نوع البيانات <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()فقط.