右边的背景图像填充

如何在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/

来源

2013-01-08 user1251698

用做它background-position: 96% 50% ;

第一个值表示x-axis，第二个值表示y-axis。

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

来源

2013-01-08 07:17:08 Sowmya

我觉得一定要实现这个没有设定特定的左侧位置所需要的问题吗？ –

@GarethCornish我现在看到了，并更新了答案 – Sowmya

据我所知，你不能用CSS做到这一点。只有两种选择：

在图像中包含间距。这可能是不可能的，但如果是最简单的，那就是可能的。
使用两个包含DIV标签。一个拥有边界，外部空间，第二个拥有背景。
```
<div class="outer"><div class="inner">Title</div> 
```

和CSS

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

http://jsfiddle.net/mQGcF/4/

来源

2013-01-08 07:25:11

当你将宽度指定到外部div时，我将会遇到问题，因为OP提到宽度不固定。 – Sowmya

宽度只是从原始示例中复制而来。您可以将其更改为任何您喜欢的内容，或将其完全取出 - 背景仍可正确定位。 –

U可以使用

padding-right:20px;

或

padding:0px 20px 0px 0px;

演示here

来源

2013-01-08 07:29:11

它如何提供正确的填充图像？ – Sowmya

img {width：100;高度：100像素;保证金左：自动; margin-right：20px;} –

这是bg图像，而不是内嵌图像 – Sowmya

右边的背景图像填充

回答

相关问题