html - 如何将按钮的背景图像设置为左对齐？

Question

如何使背景图像出现在按钮的左边框附近？

.button1 {
  background-color: transparent;
  background-image: url('nebifat.png') no-repeat;
  font-size: 30px;
  padding-left: 64px;
  text-align: left;
  position: relative;
  border-style: none;
  height: 7%;
  width: 50%;
  vertical-align: middle;
  margin-top: 10%;
  opacity: 0.6;
}

<center>
  <button id='r1' class='button1'>Matematica si Fizica</button>
</center>

Answer 1

您在background-image中设置了no-repeat，而是可以使用background: url('...') no-repeat 或 background-repeat: no-repeat，还有 center已从 Web 标准中删除。您可以使用 background-position 定位背景

.button1 {
  background-color: transparent;
  background-image: url("http://placehold.it/50x50");
  background-repeat: no-repeat;
  font-size: 30px;
  padding-left: 64px;
  text-align: left;
  position: relative;
  border-style: none;
  height: 7%;
  width: 50%;
  vertical-align: middle;
  margin-top: 10%;
  opacity: 0.6;
  border: 1px solid black;
  background-position: left;
}

<button id='r1' class='button1'>Matematica si Fizica</button>