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

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

渐变背景在800px（我想要的）后停止，但它在屏幕的右侧，而不是网页内容的后面。我无法将其移动到其他任何地方。此外，根据 window 大小，它出现在与内容的不同距离处。我需要把它固定在中心，在我的内容后面。

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

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

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

Answer 1

尝试这样的事情

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

使用百分比可确保您的页面缩放，并且屏幕的左右四分之一为黑色，中间一半为纯蓝色！

Answer 2

如果我理解正确，这就是你想要的：

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

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

linear-gradient background from center / middle

html

css

background

linear-gradients