Html 背景图像css，图像不会显示

我正在做一个yatzy游戏，并试图把骰子放在每个div框中，但它不会出现

您可以在JSFIDLE上查看我的代码：

或

以下是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>

---

您提供的URL不是实际的图像。它们是带有图像的页面。改为使用：，…，等等：

#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都不够大，无法容纳完整的die图像。图像为111x111像素，您的div为40x40像素。

cool=），我可以在本地计算机中使用此路径吗：.dice6{background image:url（'img/dice.jpg'））…问题是因为我有小潜水？PS，由于您的图像不一致，您可以使用以下两种方法为骰子4重做图像，或者使用：背景位置：0-2px；为骰子4。不，您必须将图像下载到本地计算机，或者必须使用完整的URL（包括协议）引用它们。让我们来看看

#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;
}