我想要 2 个随机背景图片用于我的 <body> 的顶部和底部.我的页面顶部有 4 个潜在背景图像，底部有 4 个。我将在我的 html 中使用 php 中的函数来选择随机顶部图像类和随机底部图像类。
我知道我能做到:
background-image:url(/images/background/background-top-0.jpg),url(/images/background/background-bottom-0.jpg) ;
有没有办法将第二个背景图像添加到已声明的背景图像中？理想情况下，我想:
<body class="bg1 bg2">....</body>
.bg1{
background-image:url(/images/background/background-top-0.jpg);
}
.bg2{
background-image:inherit, url(/images/background/background-bottom-0.jpg);
}
目前我的 CSS 看起来像:
.bg1.bg2{
background-image:url(/images/background/background-top-0.jpg),url(/images/background/background-bottom-0.jpg) ;
min-height: 100%;
background-size: contain;
width:100%;
background-position: center 110px, center bottom 80px;
background-repeat: no-repeat;
background-color: #128bd0;
}
最佳答案
我们可以将一张背景图片应用到 <html>和一个到<body> .
背景类可以用在 html 或正文上
例子
html,
body {
height: 100%;
margin: 0;
}
.bg1 {
background: url(http://www.placehold.it/500X50/FF0000) no-repeat;
}
.bg2 {
background: url(http://www.placehold.it/500X50/FF9900) no-repeat;
}
html.bg {
background-position: center top;
background-color: #EEE;
}
body.bg {
background-position: center bottom;
}<html class="bg bg1">
<body class="bg bg2">
</body>
</html>关于css - 我可以在 CSS 中同时声明 2 个背景图像吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27837582/