שקיפות רקע CSS. רקע או טקסט שקוף עם CSS

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

רקע מוגדר על ידי קבוצה של תכונות (background-image, מיקום הרקע , רקע בגודל, background-repeat, background-attachment, background-origin, background-clip, צבע הרקע), שכל אחד מהם יכול להיות מוקצה בנפרד או בשילוב תחת התכונה ברקע. הבה נבחן כל אחד מהם בפירוט.

תכונת background-color

ב- CSS, את צבע הרקע ניתן להגדיר בכמה דרכים: באמצעות קוד הקסדצימלי, שם צבע או כניסת RGB. ב- CSS3 ניתן היה להשתמש במקום האפשרות RGB-הקלטה עם RGBA.

קוד צבע הקס נרשם הנכס לאחר הסריג: background-color: # FFDAB9. אם הדמויות ערך זה זהים בזוגות, הקוד הוא בדרך כלל חתך קטן: # ccff00 יכול להיות כפי שנכתב # cf0:

גוף {צבע הרקע: # cf0 ;}.

השם הוא, אפילו הצבעים האקזוטיים ביותר. לדוגמה, בנוסף לסטנדרט אדומים ולבנים אתה יכול להשתמש NavajoWhite (#FFDEAD) או Honeydew2 (# E0EEE0):

גוף {צבע הרקע: סגול; }.

האפשרות השנייה היא RGB או כניסת RGBA מאפשרת לך לציין לא רק צבע אלא גם את השקיפות של רקע CSS, אבל השיטה עובדת רק בגרסות IE מבוגרות 9. דפדפנים אחרים מכירים בגרסה רגילה עם שקיפות. על פי תקני ה- W3C עדיף להשתמש עדיין RGBA במקום RGB הרגיל יותר.

הערך האחרון ברקע RGBA וקובע את האטימות מ 0 (שקוף) כדי 1 (אטום).

ישנם כמה ערכים יוצאי דופן. צבע הרקע יכול להיות מוגדר באמצעות HSL ו HSLA. שניהם נוספו CSS3, ולכן אינם נתמכים על ידי IE גרסה 9 ומעלה. התגלמויות RGB הזהה או RGBA, רק במתכונת שונה: Hue (גוון - ערך על גלגל הצבעים, ניתן מעלות), להרוות (רוויה - עוצמת צבע כאחוז, מ -0 עד 100), בהירות (קלילות - בהירות, נמדדו באופן דומה פרמטר להרוות ).

תכונת background-image

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

{תמונת הרקע-גוף: url (bg1.png), url (bg2.png)}.

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

תכונת background-position

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

גוף {background-position: מרכז תקין ;} - בדוגמא זו, הדפוס ימוקם בצד ימין של הדף, בחלק העליון והתחתון של מרחק התמונה הזהה.

תכונה בגודל רקע

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

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

תכונת background-attachment

תכונה זו מציינת את ההתנהגות של תמונות רקע בעת הגלילה. אז, זה יכול לקחת 3 ערכים (לא כולל בירושה, הכולל עבור כל התכונות שנדונו במאמר זה):

• קבוע - הופכת את התמונה על הרקע קבוע;
• לגלול - מגילות רקע עם שאר המרכיבים;
• מקומיים - התמונה על רקע לגלול אם גלילה מכילה תוכן. רקע שחורג תוכן המסגרת קבוע.

דוגמה לשימוש:

הגוף {background-attachment קבוע}.

נכון לעכשיו, Firefox אינו תמך הנכס האחרון (המקומי).

תכונה-המוצא רקע

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

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

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

תכונה-repeat רקע

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

• no-repeat - התמונה מופיעה בדף בגרסה אחת;
• לחזור - הרקע חוזר על עצמו ב x ו- y;
• repeat-x - רק אופקית;
• repeat-y - רק במאונך;
• מרחב - רקע חוזר על עצמו, אבל אם שטח אי אפשר למלא בין התמונות מופיע ריק;
• העגולה - לתמונה תשתנה, אם זה לא למלא את כל האזור של תמונות כולו.

דוגמה של תכונות:

גוף {חוזר רקע: לא- חוזר חוזר} - background-repeat הדומה: repeat-y.

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

תכונה-קליפ רקע

תכונה זו מגדירה את ההתנהגות של הרקע תחת הגבולות (לדוגמא, במקרה של המסגרות המקווקות):

• padding-קופסא - רקע מוצג בחלק הפנימי של הבלוק;
• גבול-box - התמונה מגיעה תחת המסגרת;
• תיבה-תוכן - התמונה על הרקע תופיע רק בתוך התוכן.

דוגמה לשימוש:

גוף {קליפ רקע: תוכן לא תיבה;}.

Chrom ו- Safari דורשים קידומת -webkit-.

תכונות אטימות מסנן

אטימות תכונה המאפשרת לך להגדיר את השקיפות של הרקע - רכוש CSS יעבוד בכל הדפדפנים. הערך נקבע בטווח בין 0.0 ל -1.0 כלול. במקרה זה, אתה יכול להגדיר את השקיפות של הרקע CSS אין ערך שלם במקום 0.3 מספיק כדי לכתוב 0.3:

.block {background-image: url ( img.png); אטימות: 0.3;}.

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

.block {background-image: url ( img.png); מסנן: אלפא (אטימות = 30)}.

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

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