إعداد الخلفيات
إليك عدة طرق لإعداد الخلفيات على slidde.co. يمكن إعداد خلفيات CSS على أي عنصر في slidde.co
خلفية صورة ثابتة
هذا هو الاستخدام الأكثر شيوعًا.
لون احتياطي عندما تكون صورتك الخلفية قيد التحميل أو جزء من صورتك الخلفية شفاف:
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 لمزيد من المعلومات المتعمقة.
إعداد الفلاتر على الصورة الخلفية
ينطبق هذا على Page Slide Container. يمكنك النقر على خلفية متقدمة واختيار imageElement. سيقوم بإنشاء عنصر HTML منفصل <div><img /></div> داخل الحاوية كأول عنصر.
ثم يمكنك تطبيق خصائص CSS مثل الفلتر عليه. على سبيل المثال، إليك 3 طرق لإنشاء تباين أكبر بين الصورة الخلفية والنص الأمامي لتحسين قابلية القراءة.
filter: grayscale(0.5)
filter: brightness(0.5)
filter: blur(5px)
تحقق من وثائق MDN لمقدمة أكثر تعمقًا.
خلفيات أنماط قابلة للتكرار
ينطبق هذا على Page Slide Container. يمكنك النقر على خلفية متقدمة واختيار النمط.
- اختر نوع النمط
- بعد ذلك يمكنك تخصيص خيارات النمط. ويمكنك تجربة النقر على زر
ألهمنيلترى النمط العشوائي الذي يقدمه لك.
سيتم إنشاء عنصر HTML منفصل <div><svg width="100%" height="100%" .../></div> بداخله. وهذا يعني أنه يمكنك تعديل خصائص CSS الخاصة به أيضًا، مثل opacity، filter، أو حتى backgroundImage لإضافة خلفية متدرجة إلى عنصر svg الأب. ويمكنك أيضًا تحريك SVG.
خلفيات الفيديو
ينطبق هذا على Page Slide Container. يمكنك النقر على خلفية متقدمة واختيار YouTube. سيتم إنشاء عنصر HTML منفصل <div><iframe /></div> بداخله لتضمين فيديو YouTube. يمكنك لصق رابط URL الخاص بك على YouTube هناك.
حاليًا، يُسمح فقط بعناصر YouTube. نظرًا لأنها توفر تحسينًا أفضل للبث من استضافة الفيديو الخاص بنا. إذا كنت بحاجة إلى تحميل فيديو مخصص، يرجى إبلاغنا من خلال زر الملاحظات في شريط التنقل.
تحريك الخلفيات
إذا كنت تستخدم CSS backgroundImage، فيمكنك بسهولة تحريك backgroundPosition. إليك مثال.
duration: 1500ms
delay: 800ms
easing: easeOutCubic
0% { backgroundPositionY: -36vw; }
100% { backgroundPositionY: 0; }
يمكنك أيضًا تحريك خصائص CSS الأخرى.
ومع ذلك، إذا كنت بحاجة إلى تحريك أشياء مثل CSS opacity، فلا يمكنك تحريكها مباشرة. نظرًا لأن opacity ينطبق على العنصر بأكمله. يجب عليك استخدام imageElement في خلفية متقدمة بدلاً من ذلك، وتعيين target إلى &>*:first-child لتطبيق ذلك على عنصر الصورة فقط.