What is new in IE9 - opacity

כיצד להגדיר שקיפות לאלמנטים ב - IE9.

בהמשך לפוסטים על IE9 נכיר את האלמנט החדש של CSS 3 שנקרא opacity.

בכדי לתת שקיפות לאלמנטים ב - html נוכל להשתמש ב - opacity, למשל:

<p style="background-color:Red; width:200px; text-align:center">
    <input type="button" value="Click Me" style="opacity: 0.7;" />
</p>

בדפדפנים ישנים נראה את זה:

ואילו בדפדפנים חדשים

או אפשר לדוגמא להציג מגוון של צבעים בעזרת הקוד הבא:

<table class="opacity_sample" cellspacing="0">
    <tr>
        <td style="opacity: 0.0;">
        </td>
        <td style="opacity: 0.05;">
        </td>
        <td style="opacity: 0.1;">
        </td>
        <td style="opacity: 0.15;">
        </td>
        <td style="opacity: 0.2;">
        </td>
        <td style="opacity: 0.25;">
        </td>
        <td style="opacity: 0.3;">
        </td>
        <td style="opacity: 0.35;">
        </td>
        <td style="opacity: 0.4;">
        </td>
        <td style="opacity: 0.45;">
        </td>
        <td style="opacity: 0.5;">
        </td>
        <td style="opacity: 0.55;">
        </td>
        <td style="opacity: 0.6;">
        </td>
        <td style="opacity: 0.65;">
        </td>
        <td style="opacity: 0.7;">
        </td>
        <td style="opacity: 0.75;">
        </td>
        <td style="opacity: 0.8;">
        </td>
        <td style="opacity: 0.85;">
        </td>
        <td style="opacity: 0.9;">
        </td>
        <td style="opacity: 0.95;">
        </td>
        <td style="opacity: 1.0;">
        </td>
        <td style="opacity: 1.0;">
        </td>
        <td style="opacity: 0.95;">
        </td>
        <td style="opacity: 0.9;">
        </td>
        <td style="opacity: 0.85;">
        </td>
        <td style="opacity: 0.8;">
        </td>
        <td style="opacity: 0.75;">
        </td>
        <td style="opacity: 0.7;">
        </td>
        <td style="opacity: 0.65;">
        </td>
        <td style="opacity: 0.6;">
        </td>
        <td style="opacity: 0.55;">
        </td>
        <td style="opacity: 0.5;">
        </td>
        <td style="opacity: 0.45;">
        </td>
        <td style="opacity: 0.4;">
        </td>
        <td style="opacity: 0.35;">
        </td>
        <td style="opacity: 0.3;">
        </td>
        <td style="opacity: 0.25;">
        </td>
        <td style="opacity: 0.2;">
        </td>
        <td style="opacity: 0.15;">
        </td>
        <td style="opacity: 0.1;">
        </td>
        <td style="opacity: 0.05;">
        </td>
        <td style="opacity: 0.0;">
        </td>
    </tr>
</table>
 
.opacity_sample
{
    width: 300px;
    height: 250px;
    border: solid 1px black;
}
td
{
    width: 41px;
    height: 250px;
    background-color: Navy;
}
div
{
    opacity: 0.5;
    position: absolute;
    text-align: center;
    color: rgba(255,0,0,0.5);
    font-weight: bold;
    background-color: Silver;
    width: 200px;
    top: 89px;
    left: 41px;
}