背景图像位置与填充

Question

我将图标设置为背景，如下所示：

正如您所看到的，箭头后面必须有填充以获得良好的空间。 我该如何解决这个问题？

HTML

<span class="arrowIcon">Newsletter Sign up</span>

CSS

.arrowIcon{
  background-image:url(../img/arrow.png);
  background-position:right center;
  background-repeat:no-repeat;
  background-color:#5379A5;
  padding:10px;
  color:#FFFFFF;
  float:right;
  width:55%;
}

Answer 1

您可以在css中将此背景图像写在右侧。

background-position: right 10px center;

我认为这是最干净的解决方案。

Answer 2

您可以使用calc。

＆＃13;

＆＃13;

#test {
  background-color: moccasin;
  width: 500px;
  height: 100px;
  background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
  background-position: calc(100% - 10px) center;
  background-repeat: no-repeat;
}

＆＃13;

<div id="test">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以添加与背景颜色相同的右边框：

{{1}}

Answer 4

背景图片不考虑填充，使用背景位置或将<span>拆分为<span>newsletter sign up<img></img></span>。

Answer 5

这是：

.arrowIcon {
  background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
  background-position: 95% center;
  /* adjust the 98% as your needs or put px value instead if you know extact div size */
  background-repeat: no-repeat;
  background-color: #5379A5;
  background-size: 1em;
  padding: 10px;
  color: #FFFFFF;
  float: right;
  width: 55%;
  
  /* to display correctly in SO */
  position: absolute;
  top: 25%;
  right: 0px;
}

<span class="arrowIcon">Newsletter Sign up</span>

Answer 6

因为，你已经给了浮动：对了它将会是正确的。