example1 {

Question

我正在尝试在CSS中添加两个背景，但是一个图像填充整个背景，另一个图像在页面的中间右侧对齐。这是我当前StyleSheet的一部分：

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，然后用逗号分隔定位，但这不起作用。有任何想法吗？

Answer 1

将父元素的高度设置为100％，即设置为html。然后使用cover的{{1}}值占用底层图像的完整空间。将background-size设置为＆＃39; background-position＆＃39;第一张图片。

＆＃13;

right center

＆＃13;

Answer 2

CSS3支持多个背景图像;

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

参考http://www.css3.info/preview/multiple-backgrounds/

Answer 3

您可以看到本教程：http://www.css3.info/preview/multiple-backgrounds/

example1 {

宽度：500px;

身高：250像素;

background-image：url（sheep.png），url（betweengrassandsky.png）;

background-position：center bottom，left top;

background-repeat：no-repeat;

}

Answer 4

参考这个。它会帮助你......

 body {
background-image: url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg), url(http://footyprofit.co/wp-content/uploads/2013/02/golf-background.jpg);
background-position: center right, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
 }

CSS中的两个背景图像

4 个答案:

example1 {