7 מאפייני רקע של CSS כדי להחיות את עיצובי האינטרנט שלך

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

אתה יכול להשתמש במאפייני רקע CSS כדי להגדיר את סגנון הרקע של רכיבי HTML. למד הכל על כמה ממאפייני ה-CSS שבהם אתה יכול להשתמש כדי ליצור רקעים מצוינים.

1. צבע רקע

ה מאפיין צבע רקע מגדיר את צבע הרקע של אלמנט. אתה יכול להגדיר את הצבע באמצעות שם כמו "אדום", ערך HEX כמו "#00FF00" או ערך RGB - כמו "rgb (0, 255, 0)". אתה יכול גם להשתמש בערך HSL כדי להגדיר את צבע הרקע באמצעות גוון, רוויה ובהירות.

הדוגמה הבאה מגדירה את צבע הרקע של כל העמוד לכתום. כל רכיבי הכותרת מקבלים רקע שונה.

<גוּף>
<h2>אני ירוקh2>
<h3>אני אדוםh3>
<h4>אני כחולh4>
גוּף>

באמצעות CSS, אתה יכול להחיל צבע רקע ייחודי על כל אלמנט:

גוּף {
צבע רקע: תפוז;
}
h2 {
צבע רקע: #006600;
}
h3 {
צבע רקע: rgb(128, 0, 0);
}
h4{
צבע רקע: hsl(240, 100%, 50%);
}

זה יעצב את הדף כך שיראה:

אתה יכול להשתמש במאפיין האטימות כדי לקבוע את השקיפות של אלמנט. האטימות לוקחת ערכים בין 0.0 ל-1.0. ככל שהערך נמוך יותר, כך האלמנט שקוף יותר.

כדוגמה, נסה להגדיר את האטימות של אלמנט גוף ל-0.5:

גוּף {
צבע רקע:תפוז;
אֲטִימוּת:0.5;
}

זה יוצג כדלקמן - השווה את הצבעים לאלו בצילום המסך הקודם:

2. תמונת רקע

המאפיין רקע-תמונה מגדיר תמונה כרקע של אלמנט. אתה יכול להפנות לתמונה מקומית או תמונה מהאינטרנט.

<גוּף>
 <h1>שלוםשם!h1>
 <ע>אניישanתמונהבשֶׁלִירקע כללי!ע>
גוּף>

קובץ ה-CSS:

גוּף {
תמונת רקע:url("https://תמונות.pexels.com/תמונות/1191710/pexels-photo-1191710.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=1260&ח=750&dpr=1");
}

זה יוצג כך:

אתה יכול גם להשתמש מעברי רקע כדי ליצור מראה ייחודי עבור האפליקציה שלך.

3. רקע-חזרה

המאפיין רקע-תמונת חוזר על תמונות כברירת מחדל. אתה יכול לבחור לחזור על התמונה אופקית על ציר ה-x או אנכית על ציר ה-y.

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

<גוּף>
<h1>שלום לך!h1>
<h3>אני מדגים את התכונה חזרה רקע-חזרה על ציר ה-x!h3>
גוּף>

השתמש ב-CSS הבא כדי להחיל רקע חוזר לאורך ציר ה-x:

גוּף {
תמונת רקע: כתובת אתר("https://תמונות.pexels.com/תמונות/459335/pexels-photo-459335.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=1260&ח=750&dpr=1");
רקע-חזרה: חזרה-x;
}

התוצאה:

לאחר מכן, נסה לחזור על התמונה על ציר ה-y:

גוּף {
תמונת רקע:url("https://cdn.pixabay.com/תמונה/2016/04/18/22/05/צדפים-1337565__340.jpg");
רקע-חזרה:repeat-y;
}

התוצאה:

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

גוּף {
תמונת רקע:url("https://תמונות.pexels.com/תמונות/259915/pexels-photo-259915.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=600");
רקע-חזרה:אין חזרה;
}

התוצאה:

4. מיקום רקע

המאפיין רקע-מיקום מגדיר את המיקום של תמונת הרקע בתוך האלמנט שלה. הוא משתמש במילות מפתח ספציפיות למיקום כמו מֶרְכָּז, חלק עליון, ו תַחתִית, או ערך פיקסל או אחוז.

הוסף מאפיין מיקום רקע לתמונה האחרונה:

גוּף {
תמונת רקע: כתובת אתר("https://תמונות.pexels.com/תמונות/259915/pexels-photo-259915.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=600");
מיקום רקע: חלק עליוןמֶרְכָּז;
}

זה ייראה כך:

ניתן לראות שהתמונה מעוותת את מראה האתר. בוא נתקן את זה עם הנכס הבא.

5. גודל רקע

אתה יכול להשתמש במאפיין תמונת רקע כדי להגדיר גודל ספציפי לתמונה. הוא משתמש במילות מפתח כמו כיסוי ו לְהַכִיל או ערך פיקסל או אחוז. בואו נתקן את תמונת הרקע המעוותת על ידי הוספת מאפיין בגודל רקע.

גוף {
 רקע-תמונה: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 רקע-חזרה: אין-חזרה;
 מיקום רקע: מרכז;

התוצאה מראה שהתמונה מכסה כעת את דף האינטרנט באופן פרופורציונלי.

6. רקע-מצורף

המאפיין רקע-מצורף מגדיר אם מיקום תמונת הרקע נשאר קבוע או גולל. אתה יכול להשתמש במילות המפתח קבועות או לגלול.

בואו נראה את זה בקוד הבא:

<גוּף>
<h1>המאפיין רקע-מצורףh1>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
<ע>עם מאפיין הקובץ המצורף הקבוע תבחין שהרקע לא זז עם הטקסט.ע>
גוּף>

קובץ ה-CSS:

גוּף {
תמונת רקע: כתובת אתר("https://תמונות.pexels.com/תמונות/96627/pexels-photo-96627.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=600");
רקע-חזרה: ללא חזרה;
מיקום רקע: מֶרְכָּז;
גודל רקע: כיסוי;
רקע-מצורף: תוקן;
}

אם תזוז למטה בעמוד, תבחין שהרקע לא זז:

כדי להדגים את המאפיין גלילה רקע-מצורף, שנה את מילת המפתח ל גְלִילָה. תבחין שעכשיו הרקע זז עם הטקסט.

גוּף {
תמונת רקע: כתובת אתר("https://תמונות.pexels.com/תמונות/96627/pexels-photo-96627.jpeg?אוטומטי=לִדחוֹס&cs=tinysrgb&w=600");
רקע-חזרה: ללא חזרה;
מיקום רקע: מֶרְכָּז;
גודל רקע: כיסוי;
רקע-מצורף: גְלִילָה;
}

7. רקע קיצור נכס

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

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

לדוגמה, במקום לכתוב קוד כך:

גוּף {
צבע רקע: ירוק;
תמונת רקע: כתובת אתר("מחשב נייד 3.jpg");
רקע-חזרה: ללא חזרה;
גודל רקע: כיסוי;
רקע-מצורף: גְלִילָה;
מיקום רקע: מֶרְכָּז;
}

אתה יכול לכתוב את זה בשורה אחת, כך:

גוּף {
רקע כללי: ירוקכתובת אתר("מחשב נייד 3.jpg") ללא חזרהכיסויגְלִילָהמֶרְכָּז;
}

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

• צבע רקע
• תמונת רקע
• רקע-חזרה
• רקע-מצורף
• מיקום רקע

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

מאפייני רקע אחרים ב-CSS

CSS הוא חזק ויש הרבה שאתה יכול לעשות איתו כדי לתבל את היישום שלך. אתה יכול להשתמש במאפיינים כמו רקע-קליפ, רקע-מקור ומצב-תערובת רקע כדי להוסיף קצת אנימציה.

אתה יכול גם להשתמש בהדרגות ובדפוסים כדי להתאים אישית את הדפים שלך. נסה עם מאפייני רקע CSS כדי לחדד את כישורי עיצוב האתרים שלך.