עם כניסתו של עבודת DTP CSS3 במובנים רבים הפך להיות קל יותר והגיוני יותר: אחרי הכל, עכשיו אתה יכול לעשות כדי להגדיר את אובייקט בגמישות, לעתים רחוקות יותר להזדקק לJavaScript.בואו נגיד שאתה צריך להתאים את השקיפות של הרקע - CSS מציע מייד כמה אפשרויות.רקע
שהוגדר על ידי קבוצה של תכונות (תמונת רקע, מיקום רקע, רקע בגודל, רקע חוזר, רקע-קובץ מצורף, רקע-מוצא, רקע-קליפ, צבע רקע), כל אחד מהם יכול להיות שנקבע לבד אולהתאחד תחת אותו רקע התכונה.הבה נבחנו כל אחד מאלה ביתר פירוט.
מייחס צבע רקע
בCSS, צבע הרקע ניתן להגדיר בכמה דרכים: באמצעות, שם צבע קוד הקסדצימלי או RGB-כניסה.בCSS3 ניתן היה להשתמש במקום אפשרות RGB-הקלטה עם RGBA.קוד צבע hex
כתוב בנכס לאחר הסריג: צבע רקע: # FFDAB9.אם הדמויות בזוגות להתאים שיא כזה, הקוד הוא בדרך כלל קטן לחתוך: # ccff00 יכול להיות כפי שנכתב # cf0: גוף
{צבע רקע: # cf0;}.
שם שם, אפילו בצבעים האקזוטיים ביותר.לדוגמא, בנוסף לאדום ולבן סטנדרטיים, אתה יכול להשתמש ארגמןכהה color (#FFDEAD) או ירוק-מלון 2 color (# E0EEE0): גוף
{צבע רקע: סגול;}.
RGB האפשרות האחרונה או שיא RGBA מאפשר לכם להגדיר צבע לא רק, אלא גם את השקיפות של CSS הרקע, אבל בדרך לעבודה באקספלורר 9 גרסאות רק מבוגרות יותר.דפדפנים אחרים להכיר גרסה רגילה עם שקיפות.על פי תקני W3C עדיף להשתמש בכל אותה RGBA במקום RGB הרגיל יותר.הערך האחרון
בRGBA מגדיר את האטימות של הרקע ובין 0 (שקוף) עד 1 (אטום).
יש כמה ערכים חריגים.ניתן להגדיר את צבע הרקע באמצעות HSL וHSLA.שניהם הוסיפו בCSS3, ולכן אינו נתמכים על ידי IE גרסת 9 ומעלה.אפשרויות זהות לRGB או RGBA, רק במתכונת שונה: גוון (גוון - הערך בגלגל הצבעים, ניתן במעלות), להרוות (רוויה - עוצמת צבע כאחוז, 0-100), קלילות (קלילות - בהירות, נמדדו באופן דומה פרמטר להרוות).
מייחס רקע תמונת
ביותר גרסת דפדפן הצולב של רקע שקוף - הוא השימוש בתמונה.בCSS3, ניתן לציין עוד יותר תמונות, זה נעשה באמצעות פסיק.לדוגמא: גוף
{רקע תמונה: כתובת אתר (bg1.png), כתובת האתר (bg2.png)}.
תומך גם IE8 זה.כמה תמונות כרקע השתמש בפריסה של הגומי.חשוב לציין, אל תשכחו להשתמש בכל תמונה כפי שנקבע בצבע רקע CSS שלך, משום שמשתמשים יכולים פשוט להעלות תמונה.
מייחס מיקום רקע
אם אתה משתמש בתמונה כדי להגדיר את בלוק הרקע, CSS מאפשר לכם למקם את התמונה בכל מקום על המסך.כברירת מחדל, התמונה ממוקמת בפינה השמאלית העליונה.המאפיין לקבל כל כיוונים מילוליים (למעלה, למטה, שמאלה, ימינה), או מספרי (ריבית, פיקסלים ויחידות אחרות).יש צורך לציין את שני ערכים לאופקי ואנכי: גוף
{מיקום רקע: מרכז תקין;} - בדוגמא זו, הרקע יהיה ממוקם בצד ימין של הדף, עם החלק העליון והתחתון של המרחק לתמונה זהה.
מייחס רקע בגודל
לפעמים אתה צריך להשתמש ב- CSS כדי למתוח את הרקע או להקטין את גודלו.לצורך כך, רקע בגודל התכונה, והגודל יכולים להיות מוגדר כפיקסלים רקע או אחוז, או בכל יחידת מדידה אחרת.
עם תכונה זו, יש כמה בעיות: לתצוגה נכונה של רקע בדפדפנים ישנים עליך להשתמש בקידומת.כמובן, הגרסאות הנוכחיות תומכות באופן מלא תכונה זו ואת הצורך במאפיינים ספציפיים נעלמו.
מייחס רקע המצורף
תכונה זו מציינת את ההתנהגות של תמונת הרקע בעת גלילה.לדוגמא, זה יכול לקחת 3 ערכים (למעט בירושה, לסך כל התכונות במאמר זה):
- קבוע - עושה את התמונה על הרקע קבוע;הגלילה
- - מגילות רקע עם שאר האלמנטים; המקומי
- - התמונה על רקע לגלול אם גלילה היא תוכן.רקע, אשר הולך מעבר לתוכן קבוע.
דוגמא לשימוש: גוף
{רקע מצורף קבוע}.
נכון לעכשיו, פיירפוקס אינו תומך ברכוש האחרון (המקומי).
מייחס רקע המוצא
תכונה זו אחראית על המיקום של האלמנט.גרסאות דפדפנים קודם לכן דורשות השימוש בקידומות.יש הנכס עצמו שלושה פרמטרים: עמדות padding-תיבת
- מקצה הרקע, תוך לקיחה בחשבון את העובי של המסגרת;מאפייני גבול תיבת
- שונים מהקודם בכך שיכול להיות קו הגבול לחלוטין או באופן חלקי לכסות את הרקע;תמונת מיצוב תוכן התיבה
- pryavyazyvaya התוכן שלה.
אם תציין מספר ערכים, הדפדפן יכול להגיב בדרכם שלהם: פיירפוקס והאופרה קיבלו את האפשרות הראשונה בלבד.
מייחס רקע חוזר
ככלל, אם לא צוינה תמונת הרקע, זה חייב להיות חוזר ונשנה אופקי או אנכי.לשם כך, ומשמש רקע חוזר תכונה.לפיכך, רקע בלוק, CSS המכיל נכס כזה יכול להיות אחד מכמה אפשרויות: שאינו חוזר
- - תמונה מופיעה בדף בצורה יחידה;
- חוזר - הדפוס חוזר ונשנה בx ו- y;
- חוזר-X - רק אופקי;
- חוזר-y - רק בצורה אנכית;
- החלל - דפוס חוזר, אבל אם החלל לא מולא באופן, אז יש חללים בין תמונות; סיבוב
- - התמונה ישתנה, אם זה לא למלא את כל התמונה כולה האזור.
דוגמא לתכונה: גוף
{רקע חוזר: לא חוזר חוזר} - דומה רקע חוזר: repeat-y.
בCSS3 יכול לציין ערכים למספר רבים של תמונות, אם הפרמטרים ההעברה מופרד בפסיקים.
מייחס
רקע קליפ תכונה זו מציינת את ההתנהגות של הרקע תחת הגבולות (לדוגמא, במקרה של המסגרות מקווקוות):
- padding-תיבה - רקע מוצג בחלק הפנימי של הבלוק; גבול תיבת
- - מגיע במסגרת של התמונה; תוכן התיבה
- - התמונה על הרקע מופיעה רק בתוך התוכן.
דוגמא לשימוש: גוף
{רקע-קליפ: תוכן תיבה;}.
כרום וספארי דורשים שימוש ב-webkit- הקידומת.תכונת אטימות
ולסנן תכונת אטימות
מאפשרת לך להגדיר את שקיפות רקע - רכוש CSS יעבוד בכל הדפדפנים.הערך הוא מתכוונן 0.0-1.0 כלול.עם זה אתה יכול להגדיר את השקיפות של CSS הרקע ללא ערך שלם במקום 0.3 מספיק כדי לכתוב .3: .block
{רקע תמונה: כתובת אתר (img.png);אטימות: .3;}.
כדי להגדיר את שקיפות הרקע, CSS מתאים גם עבור IE מתחת לגרסה התשיעית, להשתמש במסנן התכונה: .block
{רקע תמונה: כתובת אתר (img.png);מסנן: אלפא (אטימות = 30);}.
במקרה זה, את האטימות מוגדרת בין 0 ל 100. הערה שהאטימות מייחסות הגדרות שונות שקיפות באמצעות התורשה RGBA: אטימות באמצעות רקע שקוף הוא לא רק, אלא גם את כל הפריטים בתוך היחידה.
תמיד לוודא הנתונים סטטיסטיים על שימוש בדפדפן של חבר העמים וכל המדינות האחרות.הבעיה הגדולה ביותר של כל DTP - הגרסאות ישנות יותר של אינטרנט אקספלורר, הם לא מאפשרים שימוש מלא של CSS3.אם הפריסה אל תשכח להשתמש בשירותים המיוחדים שיבדקו אם הדפדפן שלך הוא CSS רכוש.אם אתה לא יכול להתקין גרסאות ישנות יותר של דפדפנים, אתה מקבל את השירות שבודק את פעילותו של האתר בדפדפנים שונים באינטרנט.
