html - 将背景图像从右侧放置 1em？

Question

据我所知，不可能将 CSS 背景图像放置在距任何 block 的右边界 1em 处，也不可能将图像放置在距底部 1em 处。

以下代码将背景图像放置在距左侧 1em 和距顶部 2em 处。

<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
  Some text here
</div>

如果框的大小是动态的并且假设您不能更改 HTML，CSS 中是否有任何方法可以指定背景图像应该“离右边缘这么远”？

(百分比不起作用，因为框可以改变大小)

如果这不可能，您需要对 HTML 进行的最小更改量是多少？

这是我想出的解决方法:

<style>
div.background
{
  float: right; 
  background: url('bar.png') no-repeat top left; 
  margin-right: 1em; 
  width: 16px; 
  height: 16px;
}
</style>
<div class="foo">
  <div class="background" style="">&nbsp;</div>
  Some text here
</div>

Answer 1

CSS3 background-position spec允许您将 anchor 从左上角更改为您想要的任何内容。例如，下面将图像的下底 Angular 设置为距右侧 1em，距底部 2px:

background-position: right 1em bottom 2px;

确认工作地点:

IE9/10, Firefox 13+, Chrome 26+, Opera 11+, Seamonkey 2.14+, Lunascape 6.8.0

截至2013年4月，只有IE6-8和一些边缘浏览器缺乏支持。

这是一个测试页:http://jsbin.com/osojuz/1/edit