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

问题描述 投票:0回答:1

当我像这样使用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>

但是,当我尝试使用多张图像时,除非取出后退颜色,否则不会加载任何图像:

#my-element {
  background: #000000 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>

知道为什么会这样吗?就是这样吗?还是我做错了?

css background fallback multiple
1个回答
0
投票

尝试一下:移除后备背景色并单独指定。

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;
© www.soinside.com 2019 - 2024. All rights reserved.