خلفية CSS
مجاني، بلا تسجيل، يعمل داخل متصفحك.
الملف نفسه، مرمَّزًا بالنسبة المئوية داخل عنوان بيانات لـ `background-image`. استخدمه حين لا تستطيع إضافة عنصر إلى الصفحة وعليك تزيين عنصر قائم — قسم، أو بطاقة، أو ترويسة لا تتحكم في ترميزها.
تصدير بصيغة خلفية CSS، مقصوصًا عند الأسطر الأولى
.shape {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z' fill='%234f46e5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}ما يجدر معرفته
- بلا عنصر إضافي وبلا طلب شبكة: الشكل يسافر داخل ورقة الأنماط.
- مرمَّز بالنسبة المئوية بدل base64، وهو أصغر بنحو الثلث للصورة نفسها.
- كل `#` مرمَّز، وهذا هو الفرق بين خلفية تُرسم وأخرى لا تُرسم في صمت.
- أكبر من ملف SVG الخام، لأن التهريب يكلّف ثلاثة محارف عن كل محرف يستبدله.
دعم المتصفحات
شامل. عناوين البيانات في `background-image` تعمل في كل مكان. والمزلق الوحيد في التوافق هو الترميز لا الدعم — وقد عولج في الناتج بدل أن يُترك لك.
الحجم عبر الإعدادات المسبقة
كل إعداد مسبق تستطيع هذه الصيغة التعبير عنه، مقيسًا كما يخرجه المولّد. أصغرها سداسي عند 312 بايت؛ وأكبرها موجات متراكبة عند 1,071 بايت. وعدد النقاط هو ما يصنع الفارق — فكل نقطة إضافية تضيف مقطعًا تكعيبيًا كاملًا من الإحداثيات.
| الصيغة | الحجم |
|---|---|
| سداسي | 312 B |
| بلّورة | 317 B |
| جوهرة مُوجَّهة | 343 B |
| مثلث مستدير | 378 B |
| قمم جبلية | 392 B |
| اجتياحة | 407 B |
| تعرّج حادّ | 425 B |
| موجة عميقة | 443 B |
| حصاة | 455 B |
| حافة سحابة | 456 B |
| أقواس مقتطعة | 480 B |
| موجة هادئة | 483 B |
| كتلة ناعمة | 491 B |
| درجات | 519 B |
| أصداف | 543 B |
| كتلة عضوية | 563 B |
| بريق | 569 B |
| موجة عضوية | 639 B |
| نجمة | 712 B |
| موجة التذييل | 718 B |
| زهرة | 718 B |
| فقاعة | 720 B |
| حافة بكسلية | 740 B |
| رشّة | 802 B |
| تموّج | 816 B |
| موجات متراكبة | 1,071 B |
بمزيد من التفصيل
هذا هو التصدير الذي فيه مزلق حقيقي. فـ `#` غير مرمَّز داخل عنوان بيانات ينهي الرابط: يعامل المتصفح كل ما بعده بوصفه معرّف شذرة، فيفسد ملف SVG ولا تظهر الخلفية البتة — بلا خطأ في الطرفية وبلا مدخل شبكة تبحث عنه. ولأن كل لون في الترميز حرفيّ ست عشري، فإن أول تعبئة على الإطلاق تقطع الشيء كله. وبعض المولّدات تتفادى ذلك بالرجوع إلى base64، وهو صحيح لكنه أكبر بلا داعٍ. هنا يُهرَّب `%` أولًا و`#` بعده مباشرة، وهو الترتيب الوحيد الذي ينجح.
أسئلة
أي الأشكال تصلح بصيغة خلفية CSS؟
تغطي هذه الصيغة موجة, كتلة. وهذا قيد حقيقي لا قصور في الأداة: فحيث يغيب مولّد عن تلك القائمة تكون الصيغة عاجزة فعلًا عن التعبير عنه، وتقديمها رغم ذلك يسلّمك شيئًا يرسم الشكل الخطأ في صمت.
ما حجم تصدير خلفية CSS؟
بين 312 و1,071 بايت عبر الإعدادات المسبقة الـ26 التي تدعمه. تقليل النقاط هو الرافعة المؤثرة؛ أما النعومة واللون فلا يكلّفان شيئًا.
هل يمكنني تحريره يدويًا بعد ذلك؟
نعم. الناتج نص صِرف بلا تعليق مولّد ولا علامة تعريف ولا رابط يعود إلى هنا. غيّر الألوان، أو أعد تسمية الصنف، أو الصق المسار في ملف SVG خاص بك — لا شيء لاحقًا يعتمد على بقائه كما كان.
كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.