הגדרת רקעים

הנה מספר דרכים להגדיר רקעים ב-slidde.co. ניתן להגדיר רקעים ב-CSS על כל אלמנט ב-slidde.co

רקע ב-CSS

זהו המקרה הנפוץ ביותר.

צבע חלופי כאשר תמונת הרקע שלך נטענת או חלק מתמונת הרקע שלך שקוף:

backgroundColor: #000

ניתן להעלות את כתובת ה-URL של התמונה באמצעות 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.

1. בחר סוג תבנית
2. לאחר מכן תוכל להתאים את אפשרויות התבנית. תוכל לנסות ללחוץ על כפתור Inspire me כדי לראות איזו תבנית אקראית הוא נותן לך.

זה ייצור אלמנט HTML נפרד <div><svg width="100%" height="100%" .../></div> בפנים. כך שתוכל להתאים גם את תכונות ה-CSS שלו, כמו opacity, filter, או אפילו backgroundImage כדי להוסיף רקע מדורג לאלמנט האב של ה-SVG. ותוכל גם להנפיש את ה-SVG.

רקעים של סרטוני YouTube

לחץ על רקע מתקדם ובחר youtubeElement. זה ייצור אלמנט HTML נפרד <div><iframe /></div> בפנים כדי להטמיע סרטון YouTube. תוכל להדביק שם את קישור ה-URL של YouTube שלך.

כרגע רק אלמנטים של YouTube מותרים. מכיוון שהוא מספק אופטימיזציה טובה יותר להזרמה מאשר לארח את הסרטון שלנו. אם אתה זקוק להעלאת סרטון מותאם אישית, אנא הודע לנו דרך כפתור המשוב בסרגל הניווט.