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

Posted 2023-02-27

【中文标题】从中心/中间的线性渐变背景

【英文标题】：linear-gradient background from center / middle

【发布时间】：2016-04-20 18:24:34

【问题描述】：

有没有办法使用从屏幕中心/中间开始的线性渐变背景？

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

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

【参考方案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;

【讨论】：

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

我之前也尝试过 margin:0 。我写错了，因为在原来的 100% 屏幕高度之后实际上没有出现背景。需要更改您的最后一行：background-repeat: repeat-y;，现在它工作正常！

【参考方案2】：

试试这样的

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

使用百分比可确保您的页面可以缩放，并且您的屏幕左右两部分将是黑色的，中间一半是纯蓝色的！

【讨论】：

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

知道了，我没有仔细阅读，发现您的内容是固定宽度的。在这种情况下，@vals 解决方案应该很好用