我有一个复选标记,我想将它放在按钮中的文本旁边,但是当我执行 Background:left center; 时它可以工作,但我想向它添加填充和类似的东西,有什么办法可以用 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>
最佳答案
这是您的 fiddle 的代码,已在适当位置更新:
.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
关于javascript - 带填充的 DIV 背景定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15149366/