إعداد الخلفيات
إليك عدة طرق لإعداد الخلفيات على slidde.co. يمكن إعداد خلفيات CSS على أي عنصر في slidde.co
خلفية CSS
هذا هو الاستخدام الأكثر شيوعًا.
لون احتياطي عندما تكون صورة الخلفية الخاصة بك قيد التحميل أو جزء من صورة الخلفية الخاصة بك شفاف:
backgroundColor: #000
يمكن تحميل رابط الصورة باستخدام slidde.co. يمكنك أيضًا استخدام تدرجات CSS هنا، ويوفر slidde.co بعض التدرجات الجاهزة بطريقة لا تتطلب كتابة كود:
backgroundImage: url("your_image_url")
يمكنك استخدام "cover" في معظم الأوقات لضمان تغطية الخلفية لجميع الصور:
backgroundSize: cover
إذا كان backgroundSize: "cover" يخفي جزءًا مهمًا من صورتك، يمكنك ضبط مواقعها:
backgroundPosition: 50% 10px
إذا لم تكن صورة الخلفية الخاصة بك نمطًا قابلاً للتكرار، يمكنك ضبطها على عدم التكرار:
backgroundRepeat: no-repeat
يتحكم فيما إذا كانت صورة الخلفية تتحرك عند التمرير لأسفل الصفحة. عادةً، ستحتاج إلى صورة ثابتة لا تتبع التمرير لأنها تغطي الصفحة:
backgroundAttachment: fixed
يمكنك الاطلاع على وثائق MDN لمزيد من المعلومات المتعمقة
تحريك الخلفيات
إذا كنت تستخدم backgroundImage في CSS، فيمكنك بسهولة تحريك backgroundPosition. إليك مثال.
duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }
يمكنك أيضًا تحريك خصائص CSS الأخرى.
ومع ذلك، إذا كنت بحاجة إلى تحريك أشياء مثل opacity في CSS، فلا يمكنك تحريكها مباشرة. نظرًا لأن opacity ينطبق على العنصر بأكمله. يجب عليك استخدام imageElement في خلفية متقدمة بدلاً من ذلك، وضبط target على &>*:first-child لتطبيق ذلك على عنصر الصورة فقط.
الخلفيات المتقدمة
ينطبق هذا على Page Slide Container. يمكنك النقر على خلفية متقدمة واختيار الخيارات التالية.
خلفيات عناصر الصور - إعداد الفلاتر على صورة الخلفية
انقر على خلفية متقدمة واختر imageElement. سيقوم بإنشاء عنصر HTML منفصل <div><img /></div> داخل الحاوية كأول عنصر.
ثم يمكنك تطبيق خصائص CSS مثل الفلتر عليه. على سبيل المثال، إليك 3 طرق لإنشاء تباين أكبر بين صورة الخلفية والنص الأمامي لتحسين قابلية القراءة.
filter: grayscale(0.5)
filter: brightness(0.5)
filter: blur(5px)
تحقق من وثائق MDN لمزيد من المقدمة المتعمقة.
الخلفيات المتحركة
انقر على خلفية متقدمة واختر animated.
هناك العديد من إعدادات الخلفيات المتحركة التي يمكنك اختيارها.
عادة يمكنك تكوين backgroundColor وbackgroundImage للخلفية المتحركة. بعض الإعدادات المسبقة تحتوي أيضًا على متغيرات CSS تتيح لك تكوين اللون أو التباعد أو مدة الحركة.
خلفيات الأنماط القابلة للتكرار
انقر على خلفية متقدمة واختر pattern.
- اختر نوع النمط
- ثم يمكنك تخصيص خيارات النمط. ويمكنك تجربة النقر على زر
Insipre meلترى النمط العشوائي الذي يقدمه لك.
سيقوم بإنشاء عنصر HTML منفصل <div><svg width="100%" height="100%" .../></div> داخل الحاوية. وهذا يعني أنه يمكنك تعديل خصائص CSS الخاصة به أيضًا، مثل opacity، filter، أو حتى backgroundImage لإضافة خلفية متدرجة إلى عنصر svg الأب. ويمكنك أيضًا تحريك SVG.
خلفيات فيديو يوتيوب
انقر على خلفية متقدمة واختر youtubeElement. سيقوم بإنشاء عنصر HTML منفصل <div><iframe /></div> داخل الحاوية لتضمين فيديو يوتيوب. يمكنك لصق رابط URL لفيديو يوتيوب هناك.
حاليًا، يُسمح فقط بعناصر يوتيوب. نظرًا لأنها توفر تحسينًا أفضل للبث من استضافة الفيديو الخاص بنا. إذا كنت بحاجة إلى تحميل فيديو مخصص، يرجى إخبارنا من خلال زر الملاحظات في شريط التنقل.