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

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

因此,我需要能够将线性渐变的起始位置设置为中心,并让浏览器将其运行到两侧.从中心400px是它应该停止的地方(之后使用最后一种颜色) - 所以渐变的总宽度应该是800px.

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