具有水平渐变的 CSS 背景图像答案

【问题标题】：CSS Background Image with Horizontal Gradient具有水平渐变的 CSS 背景图像
【发布时间】：2012-02-20 13:02:21
【问题描述】：

我在使用带有渐变的图像作为主菜单栏的背景图像时遇到问题。

这是背景图片：

您可能知道，图像有 2 个渐变，第一个是最左侧，第二个是右侧 3/4。我想要达到的效果是这样的：

有人知道这样做的最佳做法吗？我知道唯一的问题是浏览器的宽度，我需要确保最左边的部分以非常浅的灰色开始。最右边的是深灰色。

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

这稍微容易一些，可以通过 CSS 渐变来完成。但是，我一直在尝试设置渐变从中心开始，在黄色 div 后面。

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

提前感谢您的帮助。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案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}

【讨论】：