具有多个背景的后备颜色 css 背景属性

Question

当我像这样使用 background 属性时，它工作正常：

#my-element {
  background: #000000 url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

但是当我尝试使用多张图片时，none 的图片会加载，除非我去掉后备颜色：

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

像这样：

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

知道这是为什么吗？事情就是这样还是我做错了什么？

Answer 1

试试这个：去掉回退背景色，单独指定。

background: url("https://www.airstarkennels.com/images/m-main-background.webp") left 
bottom/cover no-repeat fixed, url("https://www.airstarkennels.com/images/main- 
background.jpg") left bottom/cover no-repeat fixed;


/*Falls back to this*/
background-color: #000000;

Answer 2

所以在 Sam_ 的帮助下，我发现你只能在第二张图片上指定 background-color，如下所示：

#my-element {
  background: url("https://www.airstarkennels.com/images/m-main-background.webp") left bottom/cover no-repeat fixed, #000000 url("https://www.airstarkennels.com/images/main-background.jpg") left bottom/cover no-repeat fixed;
  color: #ff00ee;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body id="my-element">
  <div>
    <h1>Lorem Ipsum Dolor</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euis
    tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl 
    ut aliquip ex ea commodo consequat.</p>
  </div>
</body>
</html>

谢谢山姆！

具有多个背景的后备颜色 css 背景属性

Fall-back color with multiple backgrounds css background property

css

fallback

background

具有多个背景的后备颜色 css 背景 属性

Fall-back color with multiple backgrounds css background property

css

fallback

background

具有多个背景的后备颜色 css 背景属性