Question

我有一个复选标记，我想在按钮旁边放置文字，但是当我做背景时：左中心;它的工作原理，但我想添加填充和类似的东西，有什么办法可以使用JSFiddle提供的代码吗？我想将复选标记对中并稍微分开。

.Button {
    padding:10px;
    border:1px solid #000;
    width:auto;
    color:#CCC
}

.Button:hover {
    color:#FFF;
    cursor:pointer;
}

.Check{
    background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
}

.Check:hover {
    background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
}

HTML：

<div class="Button Check" style="background-color:rgb(69,72,77);">Test</div>

Answer 1

这是您的小提琴的代码更新，并附上勾号：

.Button {
  padding:10px 10px 10px 20px;
  border:1px solid #000;
  width:auto;
  color:#CCC
}

.Button:hover {
  color:#FFF;
  cursor:pointer;
}

.Check{
  background:url('http://67.184.73.19/Munet/Assets/Pictures/OffTick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

.Check:hover {
  background:url('http://67.184.73.19/Munet/Assets/Pictures/Tick.png') no-repeat;
  background-position: 5px 15px;
  OR: background-position: 5px center;
}

更新

还要确保根据GordonsBeard的回答，您了解为什么这有效：http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px

Answer 2

您可以使用background-poisition标记。

background-position: <spacefromleft> <spacefromtop>;

或者您可以在同一背景声明中声明它。

https://developer.mozilla.org/en-US/docs/CSS/background-position

.Check{
    background:url('OffTick.png') no-repeat 10px center;
}

.Check:hover {
    background:url('Tick.png') no-repeat 10px center;
}

如果您希望文本与背景匹配，那么只需确保在.Button上提供正确的填充（即：左侧的填充比其余三个的填充更大）其他方面）。

DIV背景定位与填充

2 个答案: