הסבר על נכס אטימות CSS ואטימות תמונה

opacityשולט הרכוש איך אטום אלמנט הוא בסולם של 0.0 ל -1.0. ככל שהערך נמוך יותר, כך האלמנט שקוף יותר.

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

אטום לחלוטין

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

שקוף למחצה

.class-name { opacity: 0.5; }

לגמרי לא שקוף

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

לחלופין, תוכלו rgbaלהגדיר את האטימות של אלמנט:

.class-name{ background-color: rgba(0, 0, 0, .5); }

זה מגדיר את background-colorהאלמנט לשחור עם 50% אטימות. הערך האחרון בערך rgbaהוא ערך האלפא . ערך אלפא של 1 שווה ל- 100% אטימות, ו- 0.5 (או .5 כמו לעיל) שווה ל- 50% אטימות.

אטימות תמונה ושקיפות

opacityהרכוש מאפשר לך ליצור תמונה שקופה ידי הוריד כמה אטום זה.

Opacity לוקח ערך בין 0.0 ל 1.0.

1.0 הוא ערך ברירת המחדל עבור כל תמונה. זה אטום לחלוטין.

דוגמא

img { opacity: 0.3; }

כלול filter: alpha(opacity=x)עבור IE8 ומוקדם יותר. ה- x לוקח ערך בין 0-100.

img { opacity: 0.3; filter: alpha(opacity=30); }

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

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

דוגמא:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

דוגמה קודנית להצגת תמונה שקופה שהופכת אטומה לרחף

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

דוגמא:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

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

עוד על CSS

גיליונות סגנון מדורגים (CSS)

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

CSS מאפשר למפתחים לשלוט במראה דפי האינטרנט על ידי "עיצוב" מבנה ה- HTML של אותו דף.

מפרטי CSS נשמרים על ידי קונסורציום הרשת העולמית (W3C).

אתה יכול לבנות כמה דברים מדהימים למדי ב- CSS בלבד, כמו למשל המשחק הזה טהור CSS Minesweeper (שאינו משתמש ב- JavaScript).