CSS背景图像与水平渐变

Question

我有一个问题是使用渐变图像作为主菜单栏的背景图像。

这是背景图片：

如您所知，图像有2个渐变，第一个是最左边，第二个是3/4到右边。我想要实现的是这样的：

有谁知道这样做的最佳做法？我知道唯一的问题是浏览器的宽度，我需要确保最左边的颜色是浅灰色。最右边，将是深灰色。

我遇到的另一个问题是主页的中心渐变：

这有点容易，可以通过CSS渐变来完成。但是，我一直试图从黄色div后面的中心设置渐变开始。

如果有人知道实现这一目标的最佳方法，那就太棒了。

提前感谢您的帮助。

Answer 1

如果只是将图像用作背景图像？

<div style="width: 896px; height: 20px;background-image: url(bg.png);"><div style="padding-left: 250px;">test</div></div> 

Answer 2

为了在css中实现这一点，你可以制作两个带有渐变的容器，这样它们可以改变宽度并且看起来仍然相同。

例如

HTML：

<div id="container">
   <div id="gradient1"></div>
   <div id="gradient2"></div>
</div>

CSS：

.container { ..... }
.gradient1 {width:60%; float:left; GRADIENT}
.gradient2 {width:40%; float:left; GRADIENT}