具有水平渐变的 CSS 背景图像
我在使用带有渐变的图像作为主菜单栏的背景图像时遇到问题。
这是背景图像： 
如您所知，图像有 2 个渐变，第一个是最左边，第二个是 3/4向右。我想要实现的是这样的：
有谁知道执行此操作的最佳实践吗？我知道唯一的问题是浏览器的宽度，我需要确保最左边将以非常浅的灰色开始。最右边是深灰色。
我遇到的另一个问题是主页的中心渐变：
这更容易一些，可以通过CSS渐变来完成。但是，我一直在尝试设置从黄色 div 后面的中心开始的渐变。
如果有人知道实现这一目标的最佳方法，那就太好了。
感谢您提前提供的帮助。
I have an issue to use an image with gradient as the background image for the main menu bar.
This the image for the background:
As you may know, the image has 2 gradient, first, the very far left and secondly 3/4 to the right. What I want to achieve is like this:
Does anyone know the best practice to do this? I know the only problem with this is the width of the browser, where I need to make sure the very far left will start with very light grey. The very far right, will be the dark grey.
Another problem that I have is the center gradient for the main page:
This is a little bit easier and can be done by CSS gradient. However, I have been trying to set the gradient start from the center, behind the yellow div.
If anyone knows how the best way to achieve this, that would be great.
Thank you for you help in advance.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果只是使用图像作为背景图像？
If just use the image as an background image?
为了纯粹在 CSS 中实现这一点，您可以制作两个带有渐变的容器，这样它们可以改变宽度，但看起来仍然相同。
例如
HTML：
CSS：
To achieve this purely in css, you could make two containers with a gradient each, that way they could change width and it would still look the same.
For example
HTML:
CSS: