عنوان URL لـ CSS ()

عندما نتحدث عن صور الخلفية ،@import، وأكثر من ذلك ، نستخدمurl()وظيفة لتحميل مورد:

div {
  background-image: url(test.png);
}

في هذه الحالة ، استخدمت عنوان URL نسبيًا ، والذي يبحث في الملف في المجلد حيث يتم تعريف ملف CSS.

يمكنني العودة مستوى واحد إلى الوراء

div {
  background-image: url(../test.png);
}

أو انتقل إلى مجلد

div {
  background-image: url(subfolder/test.png);
}

أو يمكنني تحميل ملف بدءًا من جذر المجال حيث تتم استضافة CSS:

div {
  background-image: url(/test.png);
}

أو يمكنني استخدام عنوان URL مطلق لتحميل مورد خارجي:

div {
  background-image: url(https://mysite.com/test.png);
}

المزيد من دروس css:

• دليل Flexbox
• CSS Grid Tutorial
• متغيرات CSS (خصائص مخصصة)
• مقدمة إلى PostCSS
• خاصية هامش CSS
• كيفية توسيط عنصر باستخدام CSS
• خطوط نظام CSS
• كيفية طباعة HTML الخاص بك بأسلوب
• دليل تمهيدي لانتقالات CSS
• برنامج تعليمي للرسوم المتحركة CSS
• مقدمة في CSS
• دليل CSS
• كيفية إعداد Tailwind مع PurgeCSS و PostCSS
• ورقة الغش في Tailwind
• كيفية تدوير صورة باستخدام CSS بشكل مستمر
• جعل الجدول مستجيبًا باستخدام CSS
• كيفية تصحيح أخطاء CSS عن طريق شطر
• محددات CSS
• تتالي CSS
• خصوصية CSS
• محددات سمات CSS
• ألوان CSS
• وحدات CSS
• عنوان URL لـ CSS ()
• طباعة CSS
• نموذج صندوق CSS
• خاصية موضع CSS
• استعلامات وسائط CSS والتصميم سريع الاستجابة
• استعلامات ميزات CSS
• تحويلات CSS
• كيفية تصميم القوائم باستخدام CSS
• بادئات بائع CSS
• الوراثة CSS
• فئات CSS الزائفة
• عناصر CSS الزائفة
• تصميم جداول HTML باستخدام CSS
• خاصية عرض CSS
• وظيفة CSS calc ()
• حدود CSS
• استيراد ملف CSS باستخدامimport
• معالجة أخطاء CSS
• مرشحات CSS
• تحجيم صندوق CSS
• خلفيات CSS
• تعليقات CSS
• خطوط CSS
• حشوة CSS
• خاصية تعويم CSS والمقاصة
• تطبيع CSS
• خاصية CSS z-index
• كيفية تعطيل اختيار النص باستخدام CSS
• كيفية وضع عنصر في أسفل الحاوية الخاصة به باستخدام CSS
• كيفية قلب الألوان باستخدام CSS
• العلامات المسبقة المستجيبة في CSS
• فيديوهات يوتيوب متجاوبة
• ما هي قيم CSS Breakpoint الجيدة للتصميم المستجيب؟
• كيفية محاذاة المركز في flexbox