Question

不确定为什么我不能让这个工作。我要做的就是：1）将背景设置为100％的屏幕，但最小尺寸为784px，然后我想将另一个图像置于页面中间。

JsFiddle - http://jsfiddle.net/lep128/TbSfB/

HTML

<body>
    <div class="container"></div>
</body>

CSS

body {
  font-family: 'Open Sans', sans-serif !important;
  background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS-ETyIzR8JeSwXRYpHDijfM4g5vIR8RcpzMmSE3AvCdnHPmrje');
  background-size: 100%;
  min-height: 784px;
}
.container {
    background: transparent url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRfXpcWInB-fB96WuQLAR2JPlhAwyssVbVetadWWXXYgh5ZV22yQ') center center no-repeat;
    width: 455px;
    margin: 0 auto;
    clear: both;
    height: 525px;
}

你可以看到地球停留在页面顶部而不是去中心。

谢谢，

Answer 1

你的.container对象中间将是高度：784px试试这个。

Answer 2

body {
      font-family: 'Open Sans', sans-serif !important;
      background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS-ETyIzR8JeSwXRYpHDijfM4g5vIR8RcpzMmSE3AvCdnHPmrje');
      background-size: 100%;
      height: 100%;
   }

.container {
    background: transparent url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRfXpcWInB-fB96WuQLAR2JPlhAwyssVbVetadWWXXYgh5ZV22yQ') 50% 50% no-repeat;
    width: 455px;
    margin: 0 auto;
    height: 525px;
}

这应该可以解决问题。

Answer 3

Fiddler Demo

.body {
  font-family: 'Open Sans', sans-serif !important;
  background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS-ETyIzR8JeSwXRYpHDijfM4g5vIR8RcpzMmSE3AvCdnHPmrje');
  background-size: 100%;
  height: 100%;
}

.container {
  background: transparent url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSRfXpcWInB-fB96WuQLAR2JPlhAwyssVbVetadWWXXYgh5ZV22yQ') center no-repeat;
  width: 455px;
  margin: 0 auto;
  height: 784px;
}

将背景图像居中放置在页面中间

3 个答案: