Question

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

我希望每个div在背景中都有渐变效果，从浅蓝色到div的背景颜色。

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

然而，这个PNG背景选项不具备超级可持续性。如果我决定我想要一个稍微不同的颜色作为背景，我必须用这种新颜色创建一个新的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％的浏览器。

半透明渐变图像变暗而不会饱和

1 个答案: