css - 我可以在背景中定位和调整线性渐变的大小吗？

Question

我今天一直在努力处理分层的 CSS 背景。我试图有三层(从前景到背景):

图片

黑条(用 linear-gradient

模拟

渐变叠加

这是我的元素 CSS:

  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #00000000 0%, #00000000 15%, #000000ff calc(100% - 40rem)), linear-gradient(to right, #000000ff 0%, #000000ff 100%),  url("../assets/images/bg-1080-1920.png");
  background-size: cover, 40rem 4rem, auto;
  background-position: top left, 0rem 3rem, top left;

出于某种原因，即使我已经设置了 background-position，我试图插入的黑条也会占据整个屏幕。和 background-size特性。看了之后 MDN ，我相信我已经遵守了所有的规则。它确实表明它可能是浏览器问题，但添加 -webkit到属性名称也没有帮助(我在编码时使用的是 Chromium 浏览器)。
MDN 在 background-position 上没有提到梯度页面，即使我删除了该属性，它仍然会接管屏幕。我也试过在 px 中输入尺寸查看是否是使用 rem 的问题单元。两者都无济于事。
属性值是否有明显错误？还是我疯了。

Answer 1

永远不要忘记 background-repeat

html {
  min-height: 100%;
  background-image: 
    linear-gradient(to right, #00000000 0%, #00000000 15%, #000000ff calc(100% - 40rem)), 
    linear-gradient(to right, #000000ff 0%, #000000ff 100%), 
    url("https://picsum.photos/id/1069/800/800");
  background-size: cover, 40rem 4rem, auto;
  background-position: top left, 0rem 3rem, top left;
  background-repeat:no-repeat; /* this is important !! */
}