背景图像css，图像不会出现

Question

我正在进行一场愚蠢的游戏，并尝试将骰子放在每个div框中，但它不会出现。

您可以在jsfiddle：http://jsfiddle.net/bneRe/

处查看我的代码

OR

这是HTML：

<div id="dice" title="Click on a dice to lock or unlock it">
   <div class="dice1"><div></div></div>
   <div class="dice2"><div></div></div>
   <div class="dice3"><div></div></div>
   <div class="dice4"><div></div></div>
   <div class="dice5"><div></div></div>
   <div class="dice6"><div></div></div>
</div>

这是CSS：

#dice {
  height: 40px;
  width: 240px;
}


#dice div {
  height: 40px;
  width: 40px;
  float: left;
}

.dice1 { background-image:url('http://imm.io/9YdM.jpg');
         background-position: 0 0;    
}
.dice2 { background-image:url('http://imm.io/9YdY.jpg');
         background-position: 0 0;
}
.dice3 { background-image:url('http://imm.io/9Ye4.jpg');
         background-position: 0 0;
}
.dice4 { background-image:url('http://imm.io/9Ye9.jpg');
          background-position: 0 0;
}
.dice5 { background-image:url('http://imm.io/9Yed.jpg');
         background-position: 0 0;
}
.dice6 { background-image:url('http://imm.io/9Yef.jpg');
         background-position: 0 0;
}

Answer 1

您提供的网址不是实际图片。它们是带有图像的页面。使用：http://i.imm.io/9YdY.jpeg，...等代替：

#dice {
  height: 40px;
  width: 240px;
}


#dice div {
  height: 40px;
  width: 40px;
  float: left;
}

.dice1 { background-image:url('http://i.imm.io/9YdM.jpeg');
         background-position: 0 0;    
}
.dice2 { background-image:url('http://i.imm.io/9YdY.jpeg');
         background-position: 0 0;
}
.dice3 { background-image:url('http://i.imm.io/9Ye4.jpeg');
         background-position: 0 0;
}
.dice4 { background-image:url('http://i.imm.io/9Ye9.jpeg');
          background-position: 0 0;
}
.dice5 { background-image:url('http://i.imm.io/9Yed.jpeg');
         background-position: 0 0;
}
.dice6 { background-image:url('http://i.imm.io/9Yef.jpeg');
         background-position: 0 0;
}

进行更改后，请注意每个div都不够大，无法容纳完整的骰子图像。图像为111x111像素，您的div为40x40像素。