CSS：opacity只是背景，不是里面的文字 [英] CSS: opacity only background, not the text inside

问题描述

我有这个注册表单框，我真的很喜欢如何背景变得不透明，透明的25％（85），但然后我注意到文本和表单元素也变得很暗，所以我不知道如何只有边框和背景，而不是框内的东西做这个？

I have this registration form box, and i really like how the background gets opacity, transparent with 25% (85), but then i notice that the text and the form elements also gets darkened alittle and such, so i wonder how to do this only with the border and background and not with the stuff inside the box?

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}

推荐答案

简单的方法是将文本移动到一个单独的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.

这篇关于CSS：opacity只是背景，不是里面的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！