html - 来自中心/中间的线性渐变背景

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);
}

渐变 bg 在 800px(我想要的)之后停止，但它在屏幕的右侧，而不是在网页内容的后面。我无法将其移动到其他任何地方。此外，它出现在距内容不同的距离处，具体取决于窗口大小。我需要将它固定在中心，在我的内容后面。

也许存在类似下一行的内容？

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

所以我需要能够将线性渐变的起始位置设置为中心，并让浏览器向两侧运行。距离中心 400 像素是它应该停止的地方(然后使用最后一种颜色)——所以渐变应该总共 800 像素宽。

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;
}