背景圖像css，圖像不會出現

Question

我正在做一個愚蠢的游戲，並嘗試將骰子放在每個div框中，但它不會出現。

你可以在jsfiddle上查看我的代碼： http ： //jsfiddle.net/bneRe/

要么

這是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像素。