CSS：在右下角使用固定附件定位背景渐变

Question

我遇到了一个 CSS 问题。

我想像 here 一样将 CSS 条纹作为我的页面背景，但我希望条纹位于页面的右下角。

此外，我希望它是一个固定的背景附件。

我尝试了这里的建议：How to position background image in bottom right corner? (CSS)，但它似乎只适用于背景图像，不适用于背景渐变。

我尝试在渐变定义中更改偏移量，但它仍然是相对于左上角的，如果窗口大小发生变化，结果会有所不同。

这是我当前的代码：

body
{
    background: linear-gradient(
        150deg,
        rgba(180,214,14,0.0) ,
        rgba(180,214,14,0.0) 70px,
        rgba(180,214,14,0.4) 80px,
        rgba(152,197,10,0.5) 150px,
        rgba(0,0,0,0.4) 151px,
        rgba(0,0,0,0) 160px
    ), no-repeat 0 0 !important;

    background-attachment: fixed !important;    
    /* background-position: 80% 80% !important; */
    background-repeat: no-repeat !important;
}

欢迎任何建议！

Answer 1

我认为您是正确的，因为 background-position 属性仅适用于图像而不适用于渐变。至少这是我在玩弄它时发现的。

因此，这不是“如何使background-position 用于渐变”的答案，而是建议将渐变放在不同的元素上并将 IT 放置在右下角。

喜欢：

div {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 160px;
  height: 160px;
  background: linear-gradient(
      150deg,
        rgba(180,214,14,0.0) ,
        rgba(180,214,14,0.0) 70px,
        rgba(180,214,14,0.4) 80px,
        rgba(152,197,10,0.5) 150px,
        rgba(0,0,0,0.4) 151px,
        rgba(0,0,0,0) 160px
  ), no-repeat 0 0;
  background-position: center;
}

当然，您可能必须更改渐变以更好地适应该元素，但我认为这可能是实现您想要做的事情的唯一方法。

此外，您需要确保 body 具有 position: relative（或任何包含元素）。