中心/中间线性渐变背景

Question

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

这是我的当前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);
}

渐变背景在800像素后停止（是我想要的），但它出现在页面内容的右侧，而不是其后面。我无法将它移动到其他任何位置。而且根据窗口大小不同，它与内容之间的距离也会有所不同。我需要它固定在中心，在我的内容后面。

也许下一行类似于此内容？

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

所以我需要能够设置线性渐变的起始位置为中心，让浏览器将其向两侧运行。距离中心400像素是它应该停止的位置（在此之后使用最后一种颜色） - 因此渐变应该有800像素宽度。

- JaSon

Answer 1

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

body, html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
body {
  background-image: linear-gradient(to right, black, blue 400px, black 800px);
  background-size: 800px 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

- vals

---

谢谢，这是目前为止最好的解决方案。我还需要修改其他一些东西，出现了一些小问题，比如页面底部消失了。 :D - JaSon

我之前也试过用margin:0。但是我写错了，实际上背景在原始屏幕高度的100%后面没有出现。需要修改你最后一行的代码：background-repeat: repeat-y;，现在它正常工作了！ - JaSon

Answer 2

尝试像这样做：

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

使用百分比可以确保您的页面缩放，使得屏幕左右两侧为黑色，中间一半为纯蓝色！

- user5374622

---

谢谢，但是这样当浏览器窗口变小时，我看到的背景都是黑色。当我在大屏幕全屏检查时，内容周围的背景是浅蓝色。我需要始终在内容后面/附近使用相同的颜色。 - JaSon

明白了，我没有仔细阅读你的内容，没看到它是固定宽度的。在这种情况下，@vals的解决方案应该很好用。 - user5374622