This question already has answers here:
Can I have multiple background images using CSS?
(8 个回答)
5年前关闭。
我试图在 CSS 中添加两个背景,但一个图像填充整个背景,另一个要在页面的中心右侧对齐。这是我当前样式表的一部分:
我试过用逗号分隔 URL,然后用逗号分隔定位,但这不起作用。有任何想法吗?
(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。然后使用 cover
的 background-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%;
}