למד אודות אטימות CSS3

ביצוע רקע שלך שקוף

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

כיצד להשתמש נכס אטימות

המאפיין אטימות לוקח ערך של כמות שקיפות מ -0.0 ל 1.0.

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

אז כדי להגדיר אלמנט ל 50% שקוף, היית כותב:

אטימות: 0.5;

ראה כמה דוגמאות של אטימות בפעולה

הקפד לבדוק בדפדפנים ישנים יותר

לא IE 6 ולא 7 תמיכה המאפיין אטימות CSS3. אבל אין לך מזל. במקום זאת, IE תומך במסנן אלפא של Microsoft בלבד. מסנני Alpha ב- IE מקבלים ערכים מ -0 (שקוף לחלוטין) ל -100 (אטום לחלוטין). אז, כדי לקבל שקיפות שלך ב- IE, אתה צריך להכפיל את האטימות שלך על ידי 100 ולהוסיף מסנן אלפא לסגנונות שלך:

מסנן: אלפא (אטימות = 50);

עיין במסנן אלפא בפעולה (IE בלבד)

השתמש בקידומות דפדפן

עליך להשתמש בקידומות -Moz ו- webkit כך שהגירסאות הישנות יותר של דפדפני Mozilla ו- Webkit יתמכו גם בה:

-webkit- אטימות: 0.5;
-מפה-אטימות: 0.5;
אטימות: 0.5;

תמיד לשים את הקידומות של הדפדפן הראשון, ואת המאפיין CSS3 האחרון בתוקף.

בדוק את הקידומות של הדפדפן בדפדפנים ישנים יותר של Mozilla ו- Webkit.

אתה יכול לעשות תמונות שקוף מדי

הגדר את האטימות על התמונה עצמה והיא תימוג לתוך הרקע. זה באמת שימושי עבור תמונות רקע .

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

a: רחף img {
מסנן: אלפא (אטימות = 50)
מסנן: progid: DXImageTransform.Microsoft.Alpha (אטימות = 50)
-מפה-אטימות: 0.5;
-webkit- אטימות: 0.5;
אטימות: 0.5;
}

משפיע על HTML זה:

בדוק את סגנונות לעיל ו- HTML בפעולה.

שים טקסט על התמונות שלך

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

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

1. תחילה אתה יוצר DIV מכולה ומקם את התמונה שלך בפנים:

   
   

2. בצע את התמונה עם DIV ריק - זה מה שתבצע שקוף.

   
   
   

3. הדבר האחרון שאתה מוסיף ב- HTML שלך הוא DIV עם הטקסט שלך בו:

   
   
   
   זה הכלב שלי שאסטה. הוא לא חמוד!

4. אתה בסגנון זה עם מיקום CSS, למקם את הטקסט מעל התמונה. הנחתי את הטקסט שלי בצד שמאל, אבל אתה יכול לשים אותו בצד ימין על ידי שינוי שני שמאל: 0; מאפיינים postetary: 0; .

   #תמונה {
   מקומות יחסית
   רוחב: 170px;
   גובה: 128px;
   שוליים: 0;
   }
   #text {
   תפקיד מוחלט
   top you01;
   משמאל: 0;
   רוחב: 60px;
   גובה: 118px;
   רקע: #fff;
   ריפוד: 5px;
   }
   #text {
   מסנן: אלפא (אטימות = 70);
   מסנן: progid: DXImageTransform.Microsoft.Alpha (אטימות = 70);
   -Moz-opacity: 0.70;
   אטימות: 0.7;
   }
   #מילים {
   תפקיד מוחלט
   top you01;
   משמאל: 0;
   רוחב: 60px;
   גובה: 118px;
   רקע: שקוף;
   ריפוד: 5px;
   }

תראה איך זה נראה