html - 半透明渐变图像变暗而不去饱和

Question

我正在设计一个网站，该网站的侧边菜单将具有多个嵌套的 div。每个 div 的背景都是比它周围的 div 更深的蓝色。

我希望每个 div 在背景中具有渐变效果，从略深的蓝色变为 div 的背景色。

我知道 CSS3 内置了对渐变的支持，但旧版浏览器无法显示它们，所以这不是一个选项。相反，我一直在为每个单独的 div 创建一个 PNG 背景。

但是，这个 PNG 背景选项并不是 super 可持续的。如果我决定我想要一种稍微不同的颜色作为背景，我必须用这种新颜色创建一个新的 PNG。烦人。

我希望我可以在所有的 div 中使用一个半透明的灰色到透明的 PNG 图像，这样我就可以自由地更改背景颜色。但是使用这样的 PNG 的问题在于它有点去饱和和暗淡而不是变暗......

有什么方法可以操纵这样的 PNG 使其在不去饱和的情况下使覆盖的任何内容变暗？？？

Answer 1

你去吧:

your-element{
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image:    -moz-linear-gradient(top, #444444, #999999);
  background-image:     -ms-linear-gradient(top, #444444, #999999);
  background-image:      -o-linear-gradient(top, #444444, #999999);
  background-image:         linear-gradient(to bottom, #444444, #999999);
}

以及您的 IE 规则:

your-element{
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99B4B490,endColorstr=#99B4B490);
        zoom: 1;
}

简单易用的跨浏览器兼容 99% 的浏览器。