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

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

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

Can I position and size a linear-gradient within the background?

css

background-image

linear-gradients