当我像这样使用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>
知道为什么会这样吗?就是这样吗?还是我做错了?
尝试一下:移除后备背景色并单独指定。
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;