This question already has answers here:
Can I have multiple background images using CSS?

(8 个回答)


5年前关闭。




我试图在 CSS 中添加两个背景,但一个图像填充整个背景,另一个要在页面的中心右侧对齐。这是我当前样式表的一部分:

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
  background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
  background-color: #cccccc;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
}

我试过用逗号分隔 URL,然后用逗号分隔定位,但这不起作用。有任何想法吗?

最佳答案

将父元素的高度设置为 100%,即 html。然后使用 coverbackground-size 值来占据底层图像的全部空间。将 right center 设置为第一张图像的“背景位置”。

html,
body {
  height: 100%;
}
body {
  background-image: url("http://placehold.it/300x300/333"), url("http://placehold.it/1200x1200");
  background-position: right center, center center;
  background-repeat: no-repeat;
  background-size: auto auto, cover;
  color: #384047;
  font-family: "Nunito", sans-serif;
  height: 100%;
}

10-06 05:26
查看更多