Как убрать opacity у дочернего элемента?

Есть примерно такой код:

<div id="block1" style="width: 300px; height: 300px; background-color: red;">
<div id="block2" style="width: 300px; height: 150px; background-color: #000; color: #fff; opacity: 0.2;">
<div id="block3" style="opacity: 1;">
test test test
</div>
</div>
</div>

Вот тут реализация на jsfiddle - http://jsfiddle.net/U5CLR/

Как убрать opacity (точнее вернуть его к значению 1) для блока #block3?

Спасибо.