background-image css, изображение не будет отображаться - PullRequest
Новая
       2

background-image css, изображение не будет отображаться

0 голосов
/ 05 октября 2011

Я делаю игру в yatzy и пытаюсь положить кубики в каждую ячейку, но она не появится.

Вы можете посмотреть мой код на 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;
}

1 Ответ

2 голосов
/ 05 октября 2011

URL-адреса, которые вы предоставляете, не являются реальными изображениями.Это страницы с изображениями.Используйте: 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 пикселей, а ваши деления - 40x40 пикселей.

...