图像不显示复选框（css）

Question

我尝试将图片用作网格布局中的复选框，但图片不会显示，而且我不知所措。这是相关的CSS和HTML。我已经仔细检查了图像地址，因为这在此处的许多其他帖子中都是一个问题，但它存储在正在访问的地址中。 任何帮助表示赞赏。

＆＃13;

＆＃13;

body{
	width: 100vw;
	height: 100vh;
	margin-left: auto;
	margin-right: auto;
}
.container {
	width: 100%;
	height: 100%;
	margin: 0;
}
.jumbotron {
	width: 100%;
	float: left;
}
.four {
	width: 32vw;
	float: left;
	margin-left: 2%;
	/*background-color: #95a5a6;*/
} 
.row {
	width: 100vw;
	height: 20vh;
	clear: both;
	padding: 0px;
	margin: 0px;
}
.buttonLabel {
	cursor: pointer;
}
.button input[type="checkbox"] {
	display: none;
}
.button input[type="checkbox"] + label {
	width: 32vw;
	height: 20vh;
	display: inline-block;
}
#accomLabel {
	background: url('../img/shelter.png') no-repeat;
}

＆＃13;

<div class="container">
    <div class="row jumbotron heading">
      <h1 style="text-align: center;">foo</h1>
      <h3 style="text-align: center;">bar</h3>
    </div>
      <form method="post" id="services_form">

          <div class="row">

            <div class="four">
              <div class="button">
                <input type="checkbox" id="accomButton"></input>
                <label class="buttonLabel" for="accomButton" id="accomLabel"></label>
              </div>
            </div>

            <div class="four">
              <div class="button">
                <input type="checkbox" id="foodButton"></input>
                <label class="buttonLabel" for="foodButton" id="foodLabel"></label>
              </div>
            </div>

            <div class="four">
              <div class="button">
                <input type="checkbox" id="medicalButton">                 </input>
                <label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
              </div>
            </div>

          </div>
    </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来很好，但您不需要输入结束标记（</input>）。这是一个带有placehold.it图像的演示：

body {
  width: 100vw;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
}
.container {
  width: 100%;
  height: 100%;
  margin: 0;
}
.jumbotron {
  width: 100%;
  float: left;
}
.four {
  width: 32vw;
  float: left;
  margin-left: 2%;
  /*background-color: #95a5a6;*/
}
.row {
  width: 100vw;
  height: 20vh;
  clear: both;
  padding: 0px;
  margin: 0px;
}
.buttonLabel {
  cursor: pointer;
}
.button input[type="checkbox"] {
  display: none;
}
.button input[type="checkbox"] + label {
  width: 32vw;
  height: 20vh;
  display: inline-block;
}
#accomLabel {
  background: url('http://placehold.it/54x54') no-repeat;
}

<div class="container">
  <div class="row jumbotron heading">
    <h1 style="text-align: center;">foo</h1>
    <h3 style="text-align: center;">bar</h3>
  </div>
  <form method="post" id="services_form">
    <div class="row">
      <div class="four">
        <div class="button">
          <input type="checkbox" id="accomButton">
          <label class="buttonLabel" for="accomButton" id="accomLabel"></label>
        </div>
      </div>
      <div class="four">
        <div class="button">
          <input type="checkbox" id="foodButton">
          <label class="buttonLabel" for="foodButton" id="foodLabel"></label>
        </div>
      </div>
      <div class="four">
        <div class="button">
          <input type="checkbox" id="medicalButton">
          <label class="buttonLabel" for="medicalButton" id="medicalLabel"></label>
        </div>
      </div>
    </div>
  </form>
</div>