כל מה שאתה צריך לדעת על אטימות ב- CSS



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

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

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





התרחיש הנפוץ ביותר שבו משתמשים בתכונה זו הוא זה:

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

אולי תרצה לקרוא על ה- לפני שתמשיך ללמוד על אטימות CSS.



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

ממשיך הלאה עם מאמר זה בנושא אטימות ב- CSS

אטימות ב- CSS

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



דוגמה 1: תמונת רקע מוגדרת למחצה שְׁקִיפוּת

הגדרת php בחלונות
img {opacity: 0.5 filter: alpha (opacity = 50) / * ל- IE8 ומעלה * /} תפוקה- אטימות ב- CSS- אדוריקה 

דוגמה 1: פלט

תמונה מקורית (100% אטימות)

תמונה עם הגדרת אטימות של 50%

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

ממשיך הלאה עם מאמר זה בנושא אטימות ב- CSS

אטימות שעברה בירושה עם אלמנטים מדורגים

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

בואו ניקח מופע של אלמנט טקסט צאצא שמוצב מעל תמונת TOM & JERRY בדוגמה הבאה שלנו. אנו יכולים לראות את אפקט האטימות המוגדר כברירת מחדל בדוגמה 2.

.container {position: יישור טקסט יחסי: אטימות מרכז: 0.5}. centered {position: top top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } טום ג'רי

דוגמה 2: טקסט יורש אטימות מתמונת האב

ממשיך הלאה עם מאמר זה בנושא אטימות ב- CSS

הגדרת מאפיין RGBA עבור אלמנטים מדורגים

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

דוגמה 3: שימוש בהגדרת RGBA

רקע: rgba (76, 175, 80, 1.0) / * לתמונה אין הגדרת אטימות * / / * רקע ירוק לטקסט עם 100% אטימות * / / * לטקסט בצבע כחול יש 100% אטימות * /

רקע: rgba (76, 175, 80, 0.4) / * לתמונה אין הגדרת אטימות * / / * רקע ירוק לטקסט עם 40% אטימות * / / * טקסט כחול עדיין נראה עם 100% אטימות * /

לאחר קוד הצבע RGB, התכונה 'a' מייצגת אלפא . ה אלפא הפרמטר הוא מספר שבין 0.0 (שקוף לחלוטין) ל- 1.0 (אטום לחלוטין).

ממשיך הלאה עם מאמר זה בנושא אטימות ב- CSS

אטימות משתנה על אפקט הרחף

בתרחישים מסוימים מעצבי אתרים רוצים שהאטימות תשתנה תלוי אם המשתמש מתמקד באלמנט או לא. למשל, נניח שתמונה מוגדרת כברירת מחדל לאטימות של 50%. עם זאת, כאשר המשתמש מעביר את העכבר מעל התמונה, אנו רוצים שהתמונה תגיע למיקוד מלא עם 100% אטימות.

דוגמה 4 מראה כיצד זה נעשה.

נקודות נפוצות לציין:

למצוא את המספר הגדול ביותר במערך Java
  • הגדרת אטימות מהווה אלטרנטיבה לשימוש במאפיין 'נראות' ב- CSS. עם זאת, שימוש בהגדרת האטימות מקל על הגדרת דרגות שקיפות שונות, בין אפס למלא.
  • יש לקבוע את רמת האטימות לאחר בדיקה מדוקדקת בדפדפנים שונים. כאשר אטימות מוגדרת לערכים נמוכים, לפעמים הטקסט או התמונה עשויים להיות בלתי נראים לחלוטין או בלתי ניתנים לקריאה.
  • הרעיון העומד מאחורי השימוש באטימות הוא לשים דגש חד על אלמנטים מסוימים בעוד שאלמנטים ברקע אחרים אינם מסיחים את תשומת לב המשתמש. אז אלמנטים של רקע כאלה נקבעים עם אטימות נמוכה יותר.
  • ב- Internet Explorer, עבור IE8 וגירסאות ישנות יותר, מאפיין האטום הוא הגדרת 'פילטר' שנע בין 1 ל 100. בכל שאר הדפדפנים הוא נע בין 0 ל -1.

זה מביא אותנו לסוף מאמר זה בנושא Opacity In CSS.

אם אתה מעוניין ללמוד עוד על פיתוח אתרים, עיין ב מאת אדוריקה. הדרכת הסמכת פיתוח אתרים תעזור לך ללמוד כיצד ליצור אתרים מרשימים באמצעות HTML5, CSS3, Twitter Bootstrap 3, jQuery ו- Google APIs ולפרוס אותו לשירות אחסון פשוט של אמזון (S3).

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