---
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 "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!")

##### أنواع البيانات

[`&lt;image&gt;`](/en-US/docs/Web/CSS/image "يمثل نوع البيانات <image> CSS صورة ثنائية الأبعاد. هناك نوعان من الصور: صور عادية ، يشار إليها عادةً باستخدام عنوان URL ، وصور تم إنشاؤها ديناميكيًا ، مثل الصور التي تم إنشاؤها باستخدام <التدرج> أو العنصر (). يمكن استخدام الصور مع العديد من خصائص CSS ، مثل صورة الخلفية ، صورة الحدود ، المحتوى ، صورة نمط القائمة ، والمؤشر.") [`&lt;uri&gt;`](/en-US/docs/Web/CSS/uri "لم يتم بعد كتابة الوثائق المتعلقة بهذا ؛ يرجى النظر في المساهمة!")