<分区>
我正在尝试在 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。然后使用 background-size 的 cover 值来占据底层图像的整个空间。将 right center 设置为第一张图片的“background-position”。
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%;
}关于html - CSS 中的两个背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31267646/