30 lines
3.3 KiB
Markdown
30 lines
3.3 KiB
Markdown
|
---
|
||
|
|
title: CSS Images
|
||
|
|
localeTitle: صور CSS
|
||
|
|
---
|
||
|
|
## صور CSS
|
||
|
|
|
||
|
|
هذا يساعد في إضافة صورة إلى موقع على شبكة الإنترنت.
|
||
|
|
|
||
|
|
#### عينة الكود
|
||
|
|
|
||
|
|
`<img src="picture.jpg" alt="Picture" width="100" height="100">`
|
||
|
|
|
||
|
|
* **src:** يتكون من قيمة المسار إلى الصورة المطلوبة
|
||
|
|
* **alt:** إذا لم يتم عرض الصورة ، فيمكن عرض نص بديل باستخدام سمة alt.
|
||
|
|
* **العرض:** يحدد عرضًا للصورة (يمكن أن يكون في النسبة المئوية أو px أو تلقائي)
|
||
|
|
* **الارتفاع:** يحدد ارتفاع الصورة (يمكن أن يكون في المائة أو px أو تلقائي)
|
||
|
|
|
||
|
|
#### معلومات اكثر:
|
||
|
|
|
||
|
|
##### الخصائص
|
||
|
|
|
||
|
|
[`image-orientation`](/en-US/docs/Web/CSS/image-orientation "توضح خاصية CSS اتجاه الصورة كيفية تصحيح الاتجاه الافتراضي للصورة.") [`image-rendering`](/en-US/docs/Web/CSS/image-rendering "توفر خاصية CSS الخاصة بإعداد الصورة تلميحًا للمتصفح عن الخوارزمية التي يجب استخدامها في قياس الصور.") [`object-fit`](/en-US/docs/Web/CSS/object-fit "تحدد الخاصية CSS الملائمة للكائنات كيفية تغيير عنصر الاستبدال ، مثل <img> أو <video> ، لتلائم الحاوية الخاصة به.") [`object-position`](/en-US/docs/Web/CSS/object-position "تحدد الخاصية CSS موضع الكائن محاذاة العنصر المحدد داخل المربع الخاص به.")
|
||
|
|
|
||
|
|
##### المهام
|
||
|
|
|
||
|
|
[`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!") [`radial-gradient()`](/en-US/docs/Web/CSS/radial-gradient "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!") [`repeating-linear-gradient()`](/en-US/docs/Web/CSS/repeating-linear-gradient "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!") [`repeating-radial-gradient()`](/en-US/docs/Web/CSS/repeating-radial-gradient "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!") [`element()`](/en-US/docs/Web/CSS/element "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!")
|
||
|
|
|
||
|
|
##### أنواع البيانات
|
||
|
|
|
||
|
|
[`<image>`](/en-US/docs/Web/CSS/image "يمثل نوع البيانات <image> CSS صورة ثنائية الأبعاد. هناك نوعان من الصور: صور عادية ، يشار إليها عادةً باستخدام عنوان URL ، وصور تم إنشاؤها ديناميكيًا ، مثل الصور التي تم إنشاؤها باستخدام <التدرج> أو العنصر (). يمكن استخدام الصور مع العديد من خصائص CSS ، مثل صورة الخلفية ، صورة الحدود ، المحتوى ، صورة نمط القائمة ، والمؤشر.") [`<uri>`](/en-US/docs/Web/CSS/uri "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!")
|