Question

我在google上做了一些搜索，并且有很多不同的例子，有些已经过时了。

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

我有一个背景图片，里面有很多黑色元素，顶部有一个55％不透明度的黑色div，当我添加白色文字时，背景图片中的一些非常暗的元素是略微的通过我不想要的白色文字可见。

最近有关如何实现这一目标的示例/最佳实践的任何人（使用透明的png或css）？它不必支持IE 6 ..

提前致谢。

Answer 1

米兰几乎是正确的。你需要通过RGB使透明div的背景透明。对于黑色，将是（0,0,0）。要添加透明度，您只需添加小数（类似于'不透明度：.55'用于CSS;因此要获得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包含的代码

。



此条件样式表仅供IE用户使用，因此 ahem 的其余部分，更高级的浏览器可以享受RGBa。

对于IE样式表，你需要这样的东西：

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

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

Answer 2

抱歉，我认为文字应该是透明的，这里是透明背景

#content {
   position:relative;
   z-index:1;
}

#content:before {
   content:"";
   position:absolute;
   z-index:-1;
   top:0;
   bottom:0;
   left:0;
   right:0;
   background:url(your_image.jpg);
   opacity:0.7;
}

Answer 3

在IE9之前不支持RGBA，所以如果你需要支持早期版本的IE，最好的选择就是半透明的PNG。

如何使用透明度获取div上的不透明文本？

3 个答案: