Прозрачность в CSS3. Свойство opacity

CSS3 определяет свойство opacity для применения эффекта прозрачности к любым элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0.

При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем непрозрачным. Ноль перед точкой можно не указывать.

img { opacity: .2; }
div { opacity: .5; }
span { opacity: .75; }

Свойство opacity распространяется на все дочерние элементы. Поэтому, если хотите сделать полупрозрачный фон под непрозрачный контентом, то это свойство не поможет, и цвет фона надо задать в формате rgba:

<style>
    div {
        background-color: rgba(0,255,255,.25);
        border: 2px solid rgb(0,255,255);
        padding: 10px;
    }
</style>
<div>
    Фон с прозрачностью 0.25 и непрозрачная рамка того же цвета.
</div>

Различные значения прозрачности часто используют при наведении.

<style>
    img {
        opacity: .75;
    }
    img:hover {
        opacity: 1;
    }
</style>
<p>Наведите курсор на картинку</p>
<img src="/css/example/border_flower1.jpg">

РЕЗУЛЬТАТ:

Наведите курсор на картинку