Html 从中心/中间开始的线性渐变背景

有没有一种方法可以使用从屏幕中心/中间开始的线性渐变背景

这是我当前的css：

body {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 800px;
    background: blue;
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px);
    background: linear-gradient(to left, black, blue, blue, black 800px);
}

Gradient bg在800px（我想要的）后停止，但它位于屏幕的右侧，而不是网页内容的后面。我不能把它搬到别的地方去。此外，它与内容的距离也不同，具体取决于窗口大小。我需要它被固定在中心，在我的内容后面

也许存在下一行这样的东西

background: linear-gradient(to sides, blue, black 400px);

因此，我需要能够将线性渐变的起始位置设置为中心，并让浏览器将其运行到两侧。

---

距离中心400px是它应该停止的位置（之后使用最后一种颜色），因此渐变的总宽度应该是800px。

试试这样的方法

background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%);

---

使用百分比可以确保页面缩放，屏幕的左、右四分之一部分为黑色，中间部分为纯蓝色

如果我正确理解您的请求，这就是您想要的：

body，html{
宽度：100%；
身高：100%；
边际：0px；
}
身体{
背景图像：线性渐变（向右，黑色，蓝色400px，黑色800px）；
背景尺寸：800px 100%；
背景位置：50%100%；
背景重复：无重复；
}

谢谢，但这样当浏览器窗口变小时，我看到的所有背景都是黑色的。当我全屏查看大屏幕时，内容周围的背景是浅蓝色。我需要在内容后面/附近始终使用相同的颜色。明白了，我没有仔细阅读，看不到你的内容是固定宽度的。在这种情况下，@vals解决方案应该很有效谢谢，这是目前为止最好的解决方案。我还需要更改一些其他内容，出现了一些小问题，例如页面底部丢失DI以前也尝试使用边距：0。我把它写错了，因为事实上背景并没有出现在原来100%的屏幕高度之后。需要更改最后一行：

background repeat:repeat-y，现在工作正常！