在背景图像顶部提供颜色

Posted 2023-03-06

【中文标题】在背景图像顶部提供颜色

【英文标题】：Providing the color on top of the background image

【发布时间】：2011-10-01 01:22:10

【问题描述】：

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

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

我想在图像顶部提供颜色，使图像看起来像在颜色后面。

【参考方案1】：

@巴舒;最好使用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?

【参考方案2】：

带有背景图片的 div 应该与保存您的内容和背景颜色的 div 分开。

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

这是一个 jsfiddle 示例：

http://jsfiddle.net/AZk6c/

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