Question

我需要2张随机背景图片作为<body>的顶部和底部。我的页面顶部有4个潜在的bg图像，底部有4个潜在的bg图像。我将在我的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;
}

Answer 1

你可以使用伪元素来提供背景

div {
  border: 1px solid red;
  height: 300px;
  width: 200px;
  position: relative;
  background-image: url(http://placeimg.com/640/480/tech);
}
div:before,
div:after {
  content: '';
  height: 50px;
  width: 100%;
  position: absolute;
}
div:before {
  background: url(http://placeimg.com/640/480/any);
  top: 0
}
div:after {
  background: url(http://placeimg.com/640/480/any);
  bottom: 0
}

<div></div>

Answer 2

我们可以将一张背景图片应用于<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中声明2个背景图像但不能同时声明吗？

2 个答案:

实施例