Question

我有这个注册表格框，我真的很喜欢背景变得不透明，透明度为25％（85），但后来我注意到文字和表格元素也变得暗淡等等，所以我想知道如何仅使用边框和背景进行此操作，而不是使用框内的东西？

#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 */

}

Answer 1

简单的方法是将文本移动到单独的div like so中。基本上，您将不透明度应用于单独的div并将文本放在顶部...

<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属性来提供IE，因为它不支持rgba属性。你也可以喂一个透明的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]-->

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

Answer 2

如果您只是寻找css解决方案，那么RGBA就是您的选择。对于不能使用RGBA的旧浏览器，可以使用纯色作为后备。

.stuff {
  background-color: rgb(55, 55, 55);
  background-color: rgba(55, 55, 55, 0.5);
}

您还可以回退图像：

.stuff2 {
  background: transparent url(background.png);
  background: rgba(0, 0, 0, 0.5) none;
}

以下是让你在IE的所有恶意版本中使用它所需的一切：http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer

Answer 3

您最好的选择可能是使用半透明PNG作为背景，或使用RGBa设置背景和边框的颜色。如果您不介意制作灵活宽度容器所需的额外标记，PNG将运行良好，但在IE6中也不支持它们（如果这是一个问题）。

RGBa在各种浏览器中实施较少，但如果透明度仅用于视觉风格，那么它是使用渐进增强功能的好地方。

对于RGBa，您需要添加额外的一行作为后备：

#regForm {
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    border-color: rgb(24, 17, 12);
    border-color: rgba(24, 17, 12);
}

任何无法识别RGBa声明的浏览器都只使用纯RGB。

CSS-Tricks article on RGBa across browsers

Answer 4

不需要做所有这些事情，比如不需要在div上应用位置然后不透明度，这是实现它的非常简单的方法，background: rgba(0, 0, 0, 0.6);

只有你必须使用具有不透明度值的背景颜色。

Answer 5

不能完成：任何子元素都会继承父级的不透明度。

我的情况很简单 - 只需使用两个div。将背景图像放在一个并应用不透明度，并将内容放入第二个。使用position: absolute和z-index将它们放在一起。

CSS：不透明度只有背景，而不是里面的文字

5 个答案: