html - 背景图片从右边填充

Question

如何在 div 的右侧设置背景图像并从右侧设置填充而不定义与左侧的固定距离？例如，我想将图像设置在 div 的右侧，并且始终从右侧填充 20px。

div 的宽度并不总是相同，这就是为什么我无法定义确切位置的原因。我只希望它在右侧有精确的 20px 填充，无论 div 的宽度是多少。

我正在尝试遵循代码，但它不起作用。

HTML:

<div>Title</div>

CSS:

div{
  background: url(gowalla.png) no-repeat right center;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

演示: http://jsfiddle.net/mQGcF/

Answer 1

使用background-position: 96% 50% ;

第一个值表示x轴，第二个值表示y轴。

SEE THIS LINK为了解释。

 div{
  background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) no-repeat 96% 50% ;
  width: 400px;
  border: 1px solid red;
  padding: 20px;  
}

DEMO

---

更新的答案

尝试添加一个外部 div 并为内部 div 指定边距

HTML

<div class="wrap"><div>Title</div></div>

CSS

 .wrap{
        border:solid 1px green; 
      display:inline-block;  
      width:auto; 
    }
    .wrap div{ 
      width: 400px;  
      background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) right no-repeat;  
      margin-right: 20px; 
      padding:20px
    }

DEMO 2