如何修改div的透明度而不是div文本的透明度

Question

就像Bing.com上的热点一样？

编辑：我正在使用jQuery的fadeTo（）方法来改变div的不透明度。

Answer 1

您可以使用RGBA Colors（虽然旧浏览器不支持它们）：

background-color: rgba(255, 0, 0, 0.2)

替代方案是使用PNG背景图像，它可以是部分透明的，或简化为使用两个重叠的<divs>。

Answer 2

#mydiv
{
  background-color: rgb(255,0,255); /* fallback color */
  background-color: rgba(255,0,255,0.5); /* bg with transparency */
}

虽然我相信这是CSS3 feature。事实上，我可能事实上是错的，但事情已经发生了。 ; - ）

<强> demo

Answer 3

您需要在容器div上使用RGBA背景属性。 background: rgba(64, 64, 64, 0.5)。 64,64,64是RGB颜色值。 0.5是不透明度值。现在，父母可以拥有它自己的不透明度值，这些值不会被它的孩子继承。 FireFox，Opera，Chrome，Safari和IE9完全支持此功能。

检查http://jsfiddle.net/Rp5BN/

处的工作示例

为了支持IE 5.5到8，我们需要使用特定于供应商的CSS＆＃39;渐变过滤器：＆＃39;所以你需要添加它。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

其中7f代表127，即50％不透明度和404040是颜色。

检查IE http://jsfiddle.net/Rp5BN/2/

中的工作示例