Question

我遇到了CSS问题。

我想得到一个CSS条纹作为我的页面的背景，就像我here一样，除了我希望条纹位于页面的右下角。

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

我尝试了这里建议的内容：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（或包含任何内容）。

CSS：在右下角定位带有固定附件的背景渐变

1 个答案: