Question

我有此代码：

.subbmitCommentBtn {
  background: url("../images/ikon2.png") no-repeat center top;
  padding-right: 15px;
  padding-left: 15px;
  color: white;
  cursor: pointer;
  height: 56px;
  width: 253px;
  background-color: #AF191F;
  background-position: left;
  background-repeat: no-repeat;
  font-weight: bold;
  border-radius: 20px;
  border: none;
}

<input type="submit" value="Dodaj komentarz" class=" subbmitCommentBtn">

我需要在左侧添加更多空间。我希望图片从按钮的左边缘移开（例如，向左填充10px）。

如何解决？

Answer 1

您需要设置背景位置而不是填充。默认情况下，背景也覆盖了填充，因此更改填充不会影响填充。

.subbmitCommentBtn {
  background: url("https://i.stack.imgur.com/HOZcL.png") no-repeat center top;
  padding-right: 15px;
  padding-left: 15px;
  color: white;
  cursor: pointer;
  height: 56px;
  width: 253px;
  background-color: #AF191F;
  background-position: 10px top;     /* changed from "left" */
  background-repeat: no-repeat;
  font-weight: bold;
  border-radius: 20px;
  border: none;
}

<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">

请注意，出于此代码段的目的，我还必须更改背景图片网址，因此请不要复制整个页面。

Answer 2

使用background-position获得填充效果。下面的示例：

.subbmitCommentBtn {
  background: url("https://cdn.pixabay.com/photo/2018/02/04/01/54/paper-planes-3128885_1280.png") no-repeat; /* added an image for snippet */
  background-size: 40px 40px; /* set background-size: 40px width and 40px height  */
  background-position: 15px center; /* left:15px and vertical-align:middle */
  color: #f4f6f9;
  cursor: pointer;
  height: 56px;
  width: 253px;
  background-color: #d94452;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 20px;
  border: none;
}

<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">

带有图像的按钮

2 个答案: