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

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

＆＃13;

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

＆＃13;

Answer 2

尝试这样的事情

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

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

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

2 个答案: