透明背景，不透明元素

Posted 2023-03-06

【中文标题】透明背景，不透明元素

【英文标题】：Transparent background, opaque elements

【发布时间】：2011-12-15 14:11:09

【问题描述】：

我想在body 上有一个图像背景，在主div 上有一个半透明背景，这样可以通过它看到图像，但有阴影。但是，最简单的

body 
  background-image: ...


#main 
  background-color: #999;
  opacity: 0.9

还将使#main 中的所有内容也变得不透明，例如包含img 的任何内容。

按照我的描述，你是怎么做的？

谢谢

【参考方案1】：

如果你创建一个半透明的 png 文件，几个像素大并且颜色是你想要的颜色，然后将它添加为 main 的背景图像，你应该会得到想要的结果。

【参考方案2】：

如果你的项目可以使用 CSS3，你可以使用 rgba()

#main 
  background-color: rgba(0, 0, 0, .5)

语法是 rgba(Red, Green, Blue, Alpha)。这将使#main 的背景透明但内容不透明。

这里是小提琴：http://jsfiddle.net/neilheinrich/FwxRX/

【参考方案3】：

rgba 对你有帮助，但并非所有浏览器都支持

用法：

rgba(a,b,c,d), where a = red(0-255); b = green(0-255); c = blue(0-255), d = alpha opacity(0-1)

所以如果你想要一个 50% 的红色背景，你应该使用

背景：rgba(255,0,0,0.5);

【讨论】：

这是最干净的答案。为了与一些较旧的浏览器兼容，半透明的 png 是一个很好的后备方案。

半透明png在旧版IE下有问题……不过这个问题也能解决

当然！ /doh 我不太关心旧浏览器，因为我只关心它们可以获得单色背景。这引出了我的下一个问题：如果我写color: #fee; color: rgba(240, 240, 255, 0.5)，它会按照我的想法做吗？ （即 IE6 获得单色 #fee，Chrome 理解 rgba 覆盖？我没有 IE6 来测试 :)

是的，Amadan，任何版本的谷歌浏览器都支持 rgba()，这里是参考：css-tricks.com/examples/RGBaSupport

小事，但应该是“c = blue(0-255)”，目前是“b = blue”。