0

不知道为什么我不能让它工作。我要做的只是：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;
}​

如您所见，地球停留在页面顶部而不是中心。

谢谢，

4

3 回答 3

0

你的 .container 对象中间将是 height:784px 试试这个。

于 2012-10-28T21:15:36.357 回答
0 
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;
}​

这应该够了吧。

于 2012-10-28T21:15:52.757 回答
0

提琴手演示

.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;
}​
于 2012-10-29T01:47:35.130 回答