带填充的背景图像位置答案

【问题标题】：Background image position with padding带填充的背景图像位置
【发布时间】：2016-05-30 11:22:59
【问题描述】：

我有一个图标设置为背景，如下图：

如您所见，箭头后面必须有填充物才能获得良好的空间。我该如何解决这个问题？

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%;
}

【问题讨论】：

可以添加 background-position:90% center;
使用背景位置并根据需要调整 x 值。

标签： html css background-image positioning

【解决方案1】：

您可以通过在您的 css 中写入从右侧定位背景图像。

background-position: right 10px center;

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

【讨论】：

【解决方案2】：

您可以使用calc 来完成。

#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;
}

<div id="test">

</div>

【讨论】：

【解决方案3】：

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

border-right: 10px solid #5379A5;

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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;
}

&lt;span class="arrowIcon"&gt;Newsletter Sign up&lt;/span&gt;

【讨论】：

【解决方案6】：

既然你已经给出了 float:right 它会是正确的。

【讨论】：