简单的方法是将文本移动到一个单独的div，这样。基本上你应用不透明度到一个单独的div，并将文本放在顶部...

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

另一个路由是 rgba 。不要忘记有一个单独的css属性feed IE，因为它不支持 rgba 属性。你也可以喂一个透明的png。

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

而对于IE ...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

个人我会选择第一个选项，因为它不那么麻烦。

Personally I'd go with the first option because it's less of a hassle.