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 に答える