CSS 3.0 принес много интересных свойств. Одно из них opacity. Элемент с таким свойством становится прозрачным и через него проглядывается задний фон. Свойство opacity может принимать значения от 0 до 1. Причем при 0 элемент становится невидимым, а при 1 непрозрачным.
К примеру вот два блока со свойствами:
А теперь добавим второму блоку свойство opacity:
.class1 {
margin: 50px;
width: 100px;
height: 100px;
border: 1px solid;
background: #2098f5;
}
.class2 {
margin: 50px;
width: 100px;
height: 100px;
border: 1px solid;
background: #eee000;
opacity: 0.5;
}
Internet Exploer 8 и ниже не поддерживает это свойство. В остальных распространенных браузерах последних версий все работает.