关于CSS透明度的继承问题

我们都知道用CSS实现透明效果用opacity这个属性（IE的话要用filter）。但是有一点很困扰人的是，使用了这个CSS属性后，其子节点也会自动继承这个属性，而且不能修改。就是说，就算你在子节点使用{opacity:1;}完全不会达到预期的效果，无论图片还是文字都跟着有透明度了。昨天在做新项目的注册页面，最终效果图如下：

右边的背景图需要半透明效果，中间部分的主要结构如下：

<div class=”main”>
<div class=”left”></div>
<div class=”right”></div>
</div>

背景图放在main里，left就是左边头像那部分，right是右边那个半透明的框。我在right设置了opacity为0.7，期待达到上图的效果，但是实际上并不是那么回事，实际效果如下：

右边的背景图需要半透明效果，中间部分的主要结构如下：

<div class=”main”>
<div class=”left”></div>
<div class=”right”></div>
</div>

右边部分是透明了，但它上面的所有元素也跟着变透明了，这并不是我想要的效果。但是由于自动继承，而且不能通过修改子元素的opacity来修改透明度，所以单纯使用css来达到想要的效果并不可取。
其实最简单的方法就是把背景图的右边那一半做成有透明度的样子……但是这样就没什么意思了。而且也不想麻烦设计师了。所以想想是否有什么hack的方法。
既然这是由于继承引起的问题，那么是否可以绕开这个问题呢？于是我增加了一个position为absolute的div：
<div class=”main”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”opacityfixer”></div>
</div>
通过调节opacityfixer的top跟left以及width跟height的值使它刚好跟right重叠。然后设置z-index，使它处于right之下（要为right指定z-index需要设它的position为relative）。最后就是设置opacityfixer的background-color(这里为白色)以及需要的opacity值了。
最终结果如第一张图。目前来说，我还没找到取消继承的方法。