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

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 !! */
}