如何在Windows 8设计的UI网站内插入图片

Question

我是CSS语言的新手，并在NET中复制Windows 8 CSS文件而我没有  能够插入图片插入网站中的每个瓷砖，这是  我的html文件

body {
  background: #12151c;
  margin: 0;
  height: 100%;
  -moz-transform: scale(0.75, 0.75);
  zoom: 0.75;
  zoom: 95%;
}

.container {
  width: 1200px;
  margin: auto;
  margin-top: 90px;
}

.mail {
  width: 245px;
  height: 120px;
  background: #0079C9;
  position: relative;
}

.mail:hover {
  outline: 2px solid #5c5f6a;
}

.mailIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #FFF;
}

.mailmail {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 15px;
  font-family: Segoe UI, helvetica-neue;
  font-weight: 100;
  letter-spacing: 0.8px;
  font-size: 14px;
  cursor: default;
}

.skype {
  width: 120px;
  height: 120px;
  background: #00BEF2;
  position: relative;
  top: 5px;
}

.skype:hover {
  outline: 2px solid #5c5f6a;
}

.skypeIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #FFF;
}

.skypeskype {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-weight: 100;
  font-size: 14px;
  letter-spacing: 0.8px;
  cursor: default;
}

.map {
  width: 120px;
  height: 120px;
  background: #A400AB;
  position: relative;
  left: 126px;
  top: -115px;
}

.map:hover {
  outline: 2px solid #5c5f6a;
}

.mapIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #FFF;
}

.mapmap {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-weight: 100;
  font-size: 14px;
  letter-spacing: 0.8px;
  cursor: default;
}

.read {
  width: 120px;
  height: 120px;
  background: #BC1E49;
  position: relative;
  top: -110px;
}

.read:hover {
  outline: 2px solid #5c5f6d;
}

.readIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #FFF;
}

.readread {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: default;
}

.desktop {
  width: 245px;
  height: 120px;
  background: #0079C9;
  position: relative;
  top: -105px;
}

.desktop:hover {
  outline: 2px solid #5c5f6a;
}

.desktopIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  color: #FFF;
}

.desktopdesktop {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 15px;
  font-family: Segoe UI, helvetica-neue;
  font-weight: 100;
  letter-spacing: 0.9px;
  font-size: 13px;
  cursor: default;
}

.calendar {
  width: 245px;
  height: 120px;
  background: #5C3AB7;
  position: relative;
  top: -600px;
  left: 250px;
}

.calendar:hover {
  outline: 2px solid #5c5f6a;
}

.calendarIcon {
  color: #FFF;
  position: relative;
  top: 70px;
  left: 10px;
}

.calendarDate {
  color: #FFF;
  font-size: 40px;
  left: 165px;
  top: 10px;
  position: relative;
  font-family: Segoe UI, helvetica-neue;
  display: inline-block;
  transform: scale(1.3, 1.5);
  -webkit-transform: scale(1.3, 1.5);
  -moz-transform: scale(1.3, 1.5);
  -ms-transform: scale(1.3, 1.5);
  -o-transform: scale(1.3, 1.5);
  cursor: default;
}

.calendarDay {
  color: #FFF;
  font-size: 12.5px;
  left: 180px;
  top: 10px;
  position: relative;
  font-family: Segoe UI, helvetica-neue;
  letter-spacing: .9px;
  cursor: default;
}

.sports {
  width: 245px;
  height: 120px;
  background: #5C3AB7;
  position: relative;
  top: -595px;
  left: 250px;
}

.sports:hover {
  outline: 2px solid #5c5f6a;
}

.sportsIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 65px;
  color: #FFF;
}

.sportssports {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: default;
}

.weather {
  width: 245px;
  height: 245px;
  background: #2C86EE;
  position: relative;
  top: -590px;
  left: 250px;
}

.weather:hover {
  outline: 2px solid #5c5f6a;
}

.weatherIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 65px;
  color: #FFF;
}

.weatherweather {
  color: #FFF;
  position: relative;
  top: 220px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: default;
}

.photos {
  width: 120px;
  height: 120px;
  background: #1f849f;
  position: relative;
  top: -1085px;
  left: 500px;
}

.photos:hover {
  outline: 2px solid #5c5f6a;
}

.photoIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #FFF;
}

.photophoto {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: default;
}

.help {
  width: 120px;
  height: 120px;
  background: #D9522C;
  position: relative;
  top: -1079px;
  left: 500px;
}

.help:hover {
  outline: 2px solid #5c5f6a;
}

.helpIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 55px;
  color: #FFF;
}

.helphelp {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.news {
  width: 245px;
  height: 120px;
  background: #B01A40;
  position: relative;
  top: -1074px;
  left: 500px;
}

.news:hover {
  outline: 2px solid #5c5f6a;
}

.newsIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.newsnews {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.money {
  width: 245px;
  height: 120px;
  background: #009F00;
  position: relative;
  top: -1069px;
  left: 500px;
}

.money:hover {
  outline: 2px solid #5c5f6a;
}

.moneyIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.moneymoney {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.people {
  width: 120px;
  height: 120px;
  background: #D9522C;
  position: relative;
  top: -1565px;
  left: 625px;
}

.people:hover {
  outline: 2px solid #5c5f6a;
}

.peopleIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.peoplepeople {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.ie {
  width: 120px;
  height: 120px;
  background: #2D87EF;
  position: relative;
  top: -1560px;
  left: 625px;
}

.ie:hover {
  outline: 2px solid #5c5f6a;
}

.ieIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.ieie {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.video {
  width: 57px;
  height: 57px;
  background: #D9522C;
  position: relative;
  top: -1805px;
  left: 750px;
}

.video:hover {
  outline: 2px solid #5c5f6a;
}

.videoIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: #FFF;
}

.camera {
  width: 57px;
  height: 57px;
  background: #A5009E;
  position: relative;
  top: -1800px;
  left: 750px;
}

.camera:hover {
  outline: 2px solid #5c5f6a;
}

.cameraIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: #FFF;
}

.game {
  width: 57px;
  height: 57px;
  background: #00A400;
  position: relative;
  top: -1919px;
  left: 810px;
}

.game:hover {
  outline: 2px solid #5c5f6a;
}

.gameIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: #FFF;
}

.headPhone {
  width: 57px;
  height: 57px;
  background: #00A400;
  position: relative;
  top: -1915px;
  left: 810px;
}

.headPhone:hover {
  outline: 2px solid #5c5f6a;
}

.headPhoneIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: #FFF;
}

.ws {
  width: 245px;
  height: 245px;
  background: #1EB539;
  position: relative;
  top: -2033px;
  left: 940px;
}

.ws:hover {
  outline: 2px solid #5c5f6a;
}

.wsIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #FFF;
}

.wsws {
  color: #FFF;
  position: relative;
  top: 215px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 16px;
  cursor: default;
  letter-spacing: 0.9px;
}

.fd {
  width: 245px;
  height: 120px;
  background: #009CAE;
  position: relative;
  top: -2027px;
  left: 940px;
}

.fd:hover {
  outline: 2px solid #5c5f6a;
}

.fdIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #FFF;
}

.fdfd {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.skydrive {
  width: 120px;
  height: 120px;
  background: #0A5AC3;
  position: relative;
  top: -2020px;
  left: 940px;
}

.skydrive:hover {
  outline: 2px solid #5c5f6a;
}

.skydriveIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.skydriveskydrive {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

.health {
  width: 120px;
  height: 120px;
  background: #DB552D;
  position: relative;
  top: -2140px;
  left: 1065px;
}

.health:hover {
  outline: 2px solid #5c5f6a;
}

.healthIcon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #FFF;
}

.healthhealth {
  color: #FFF;
  position: relative;
  top: 95px;
  left: 10px;
  font-family: Segoe UI, helvetica-neue;
  font-size: 13px;
  cursor: default;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 7px;
  height: 6px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  background-color: #3f4958;
}

<div class="container">
  <div class="mail">
    <i class="mail.png"></i>
    <span class="mailmail">Mail</span>
  </div>

  <div class="skype">
    <i class="fa fa-skype fa-3x skypeIcon"></i>
    <span class="skypeskype">Skype</span>
  </div>

  <div class="map">
    <i class="fa fa-map fa-3x mapIcon"></i>
    <span class="mapmap">Maps</span>
  </div>

  <div class="read">
    <i class="fa fa-get-pocket fa-3x readIcon"></i>
    <span class="readread">Reading List</span>
  </div>

  <div class="desktop">
    <i class="fa fa-windows fa-3x desktopIcon"></i>
    <span class="desktopdesktop">Desktop</span>
  </div>

  <div class="calendar">
    <i class="fa fa-calculator fa-1x calendarIcon"></i>
    <span class="calendarDate">13</span><br><span class="calendarDay">Thursday</span>
  </div>

  <div class="sports">
    <i class="fa fa-trophy fa-3x sportsIcon"></i>
    <span class="sportssports">Sports</span>
  </div>

  <div class="weather">
    <i class="fa fa-sun-o fa-3x weatherIcon"></i>
    <span class="weatherweather">Weather</span>
  </div>

  <div class="photos">
    <i class="fa fa-file-photo-o fa-3x photoIcon"></i>
    <span class="photophoto">Photos</span>
  </div>

  <div class="help">
    <i class="fa fa-question-circle-o fa-3x helpIcon"></i>
    <span class="helphelp">Help + Tips</span>
  </div>

  <div class="news">
    <i class="fa fa-newspaper-o fa-3x newsIcon"></i>
    <span class="newsnews">News</span>
  </div>

  <div class="money">
    <i class="fa fa-line-chart fa-3x moneyIcon"></i>
    <span class="moneymoney">Money</span>
  </div>

  <div class="people">
    <i class="fa fa-user fa-3x peopleIcon"></i>
    <span class="peoplepeople">People</span>
  </div>

  <div class="ie">
    <i class="fa fa-internet-explorer fa-3x ieIcon"></i>
    <span class="ieie">Internet Explorer</span>
  </div>

  <div class="video">
    <i class="fa fa-play-circle fa-2x videoIcon"></i>
  </div>

  <div class="camera">
    <i class="fa fa-camera fa-2x cameraIcon"></i>
  </div>

  <div class="game">
    <i class="fa fa-gamepad fa-2x gameIcon"></i>
  </div>

  <div class="headPhone">
    <i class="fa fa-headphones fa-2x headPhoneIcon"></i>
  </div>


  <div class="ws">
    <i class="fa fa-shopping-bag fa-2x wsIcon"></i>
    <span class="wsws">Store</span>
  </div>

  <div class="fd">
    <i class="fa fa-spoon fa-4x fdIcon"></i>
    <span class="fdfd">Food & Drink</span>
  </div>

  <div class="skydrive">
    <i class="fa fa-cloud fa-3x skydriveIcon"></i>
    <span class="skydriveskydrive">SkyDrive</span>
  </div>

  <div class="health">
    <i class="fa fa-heartbeat fa-3x healthIcon"></i>
    <span class="healthhealth">Health</span>
  </div>
</div>

我想在每个瓷砖中添加图像，我想消除额外的黑色 瓷砖下的空间。 我有另一个问题，我可以使用PHP语言更新日历磁贴，并使用PHP语言更新日期和日期