أنماط الخلفية - مساعدة Webflow
نظرة عامة على أنماط الخلفية التي يمكنك تعيينها على عنصر: الألوان، الصور، التدرجات، التراكبات اللونية، والفيديوهات.
لون الخلفية
يمكنك تعيين لون خلفية على أي عنصر باستثناء الصور والفيديوهات (على الرغم من أنه يمكنك استخدام الصور والفيديوهات كخلفيات). أضف لون خلفية عن طريق إدخال قيمة اللون (مثل hex، rgba، أو اسم اللون) أو باستخدام منتقي الألوان. يمكنك أيضًا إضافة لون خلفية لعناصر النص أو محتوى نصي محدد داخل عنصر نص.
إذا كنت ترغب في أن تكون ألوان الخلفية متسقة في جميع أنحاء موقعك، استخدم علامة Body (All pages) للوراثة. قم بتنسيقها عن طريق تحديد عنصر الجسم واختيار العلامة في لوحة الأنماط أو باستخدام قائمة الوراثة. أي تغييرات على Body (All pages) ستصبح افتراضية للعناصر الجديدة.
معظم العناصر لها خلفية شفافة بشكل افتراضي. بعض العناصر، مثل مكون Slider، لها لون افتراضي يمكنك تجاوزه.
صورة الخلفية
يوفر Webflow العديد من الخيارات لتخصيص صورة الخلفية الخاصة بك.
لإضافة أو تغيير صورة الخلفية:
- انتقل إلى الخلفيات في لوحة الأنماط
- انقر على اختيار صورة من لوحة الأصول
- تحقق من المربع لـ @2x للحصول على صور أكثر وضوحًا على الأجهزة ذات الدقة العالية
لتعيين فيديو خلفية، استخدم مكون فيديو الخلفية في لوحة الإضافة.
حجم صورة الخلفية
- مخصص: تعيين قيم العرض/الارتفاع أو النسب المئوية. تكبير أكبر مع القيم فوق 100%.
- تغطية: يملأ ويغطي الخلفية، قد يتم تقليم الصورة.
- احتواء: يحافظ على الصورة داخل العنصر.
موضع صورة الخلفية
الوضع الافتراضي هو أعلى اليسار. يمكنك ضبط المواضع يدويًا (px، %، VW، VH).
تكرار
تتكرر صور الخلفية عموديًا وأفقيًا بشكل افتراضي. التحكم في التكرار أفقيًا، عموديًا، أو عدم التكرار.
ثابت أو تمرير
اختر غير ثابت (تتحرك الصورة) أو ثابت (تبقى الصورة في مكانها). الصور الثابتة محصورة في نافذة العرض.
التدرجات
يمكن استخدام التدرجات بمفردها أو طبقتها على لون/صورة الخلفية. نوعان:
- التدرجات الخطية
- التدرجات الشعاعية
كلاهما يحتوي على نقاط توقف حيث تتلاشى الألوان.
التدرج الخطي
حدد الاتجاه بالزاوية عبر القرص، الأسهم (بزيادات 45 درجة)، أو إدخال الحقل.
نقاط توقف التدرج
تحرير اللون/الشفافية عند النقاط. الطبقة فوق الصورة تجعل الصورة مرئية عند شفافية أقل. أضف نقاطًا بالنقر. أزلها بالسحب للخارج.
تكرار
تبديل لتكرار التدرج.
عكس
أيقونة لعكس مواضع النقاط.
التدرج الشعاعي
ينشئ تدرجًا دائريًا. النقطة اليسرى هي اللون في المركز.
الموضع
اختر النقطة المحورية عبر النقاط أو يدويًا بالقيم/الوحدات.
الحجم
التحكم المسبق:
- أقرب جانب: المركز إلى أقرب جانب
- أقرب زاوية: المركز إلى أقرب زاوية
- أبعد جانب: المركز إلى أبعد جانب
- أبعد زاوية: (افتراضي)
تراكب اللون
أضف تراكب اللون إلى الخلفيات باستخدام منتقي الألوان والشفافية.
طبقات الصور والتدرجات
كدس صور الخلفية المتعددة، التدرجات، والتراكبات للتأثير. أعد الترتيب بالسحب، قم بتبديل الرؤية بأيقونة العين، احذف بالقمامة.
فيديو الخلفية
فيديوهات الخلفية هي فيديوهات صامتة ومتكررة للخلفيات لإضافة لمسة سينمائية. كن واعيًا:
أضف باستخدام البحث السريع (CMD/CTRL+E) أو لوحة الإضافة > المكونات. قم بتحميل الفيديو الخاص بك (<30MB; webm, mp4, mov, ogg). يجب أن تتجنب أسماء الملفات المسافات/الرموز الخاصة.
يحدث التحويل بعد التحميل (mp4 وwebm لدعم المتصفح).
إعدادات الفيديو
- تكرار الفيديو: يتكرر باستمرار.
- تشغيل الفيديو تلقائيًا: يبدأ عند تحميل الصفحة.
- تضمين زر التشغيل/الإيقاف المؤقت: يمكن للزائر التحكم في التشغيل.
معاينة فيديو الخلفية
- تحويم فوق الصورة المصغرة
- فتح في علامة تبويب جديدة
- أيقونة المعاينة في الشريط
استبدال فيديو الخلفية
افتح الإعدادات لاستبدال الفيديو، التحويل، المعاينة، إلخ.
استخدام فيديو الخلفية كقسم
ضع المحتوى داخل عنصر فيديو الخلفية. نسق كالمعتاد في لوحة التنسيق.
تراكب فيديو الخلفية
أضف تراكبًا متدرجًا أو صلبًا للتباين. يجلس التراكب فوق الفيديو، تحت المحتوى.
وهذا هو استخدام الخلفيات في Webflow!