html - 如何在具有透明度的div上获得不透明文本？

Question

我为此在谷歌上做了一些搜索，有很多不同的例子，有些已经过时，有些还没有。

我还查看了 http://www.w3schools.com/Css/css_image_transparency.asp 底部的示例这类似于我想要实现的目标。在示例中，div 上的文本也有点透明，但很难看到，因为它是白色 div 上的黑色文本。

我有一个背景图片，里面有很多黑色元素，在它上面有一个不透明度为 55% 的黑色 div，当我在上面添加白色文本时，背景图片中的一些非常暗的元素会稍微变暗通过我不想要的白色文本可见。

有人有关于如何实现这一点的最新示例/最佳实践(使用透明 png 或 css)吗？它不必支持 IE 6..

提前致谢。

Answer 1

米兰几乎是正确的。您需要通过 RGB 使透明 div 的背景透明。对于黑色，它将是 (0,0,0)。要增加透明度，您只需添加一个小数点(类似于 CSS 的 'opacity:.55'；因此要获得 55% 的不透明黑色背景，您可以使用

background: rgba(0,0,0,0.55);

因此，要制作一个带有 55% 不透明度背景和白色文本的示例 div，请使用:

.blackopaque {
  background:rbga(0,0,0,0.55);
  color:#ffffff;
}

“背景”更改背景，颜色更改文本的颜色(在本例中为白色)。希望这可以帮助!马特

编辑:IE 支持添加对 IE 的支持很容易，您所要做的就是专门针对 IE 用户使用他们自己的元素样式表。打开主题的头文件，假设您有一个专门为 IE 设计的带有透明 PNG 的样式表，以获得透明的黑色效果，名为 IE.css。您希望将此代码插入下方您现有的 CSS 包含:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/IE.css" />
<![endif]-->

这个条件样式表只对 IE 用户可用，所以其余的咳咳，更高级的浏览器可以享受 RGBa。

对于 IE 样式表，您需要这样的东西:

.blackopaque {
background:url('*link to your 55% opaque png file*')
color:#ffffff;
}

注意您只需在 IE 样式表中包含该规则，以便它覆盖该背景的默认规则。