CSS Paint Worklet: تخصيص صور الخلفية
2025-05-26
يوضح هذا المثال كيفية إنشاء صور خلفية ديناميكية باستخدام CSS Paint Worklet. من خلال تعريف الخصائص المخصصة `--boxColor` و `--widthSubtractor`، واستخدام مُحدد CSS `nth-of-type`، نقوم بإنشاء صور خلفية بألوان وعرض مختلفين لعناصر القائمة. يقوم JavaScript بتسجيل نص برمجي خارجي لـ Paint Worklet، وهو `boxbg.js`، والذي يحتوي على منطق رسم الخلفية. والنتيجة النهائية قابلة للتخصيص؛ قم بتغيير قيم الخصائص المخصصة في أدوات المطور لتغيير الألوان والعرض.
التطوير
خلفية مخصصة