Question

我有一个页面，其背景图片使用：

background:url('gir.gif') scroll no-repeat 0 0 #foo;

我想在图像顶部提供颜色，使图像看起来就像颜色背后一样。

Answer 1

@bashu;使用rgba颜色透明度更好，因为它根本不是透明的。

background: rgba(0,0,0,0.3)

IE的

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";

您可以在此为http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

创建IE的rgba过滤器

选中此项以获取更多Opacity of div's background without affecting contained element in IE 8?

Answer 2

具有背景图像的div应与包含内容和背景颜色的div分开。

具有内容和背景颜色的div应该跨越整个其他div并具有不透明度，或者您可以创建1x1 transparant gif / png颜色。

这是一个jsfiddle示例：

http://jsfiddle.net/AZk6c/

我建议使用透明图像作为颜色，这样文本就不会与div的其余部分透明。（除非当然没有该div中的文字）

在背景图像上提供颜色

2 个答案: