CSS:定位背景渐变与固定的附件在右下角

Question

我遇到了一个CSS问题。

我想得到一个CSS条纹作为我的页面背景，就像我在这里做的那样，只是我希望条纹位于页面的右下角。

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

我尝试了一下这里的建议：如何将背景图像定位在右下角？（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适用于渐变"的答案，而是一个将渐变放置在不同元素上并将其定位在右下角的建议。

类似：

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（或包含元素的任何元素）。