从右边放置背景图像1em？ [英] Place background image 1em from the right?

问题描述

据我所知，不可能从任何块的右边框放置CSS背景图像1em，也不可能从底部放置图像1em。

As far as I can tell, it is not possible to place a CSS background image 1em from the right border of any block, neither is it possible to place a image 1em from the bottom.

下面的代码将左侧的背景图片1em和顶部的2em放置。

The following code places the background image 1em from the left and 2em from the top.

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

CSS中有任何方式指定背景图片应该是

Is there any way in CSS to specify that the background image should be "this far from the right edge" if the size of the box is dynamic and assuming that you cannot change the HTML?

（百分比不会工作，因为框可以改变大小）

(Percentages won't work, since the box can change size)

如果这不可能，您需要对HTML进行哪些更改？

If this is not possible, what is the smallest amount of change you need to make to the 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>

推荐答案

CSS3背景位置规范允许您将锚点从左上角更改为任何您想要的。例如，以下将从右侧设置图像1em的底下角，从底部设置2px：

The CSS3 background-position spec allows you to change the anchor point from the top left to anything you want. For example, the following will set the lower bottom corner of the image 1em from the right and 2px from the bottom:

background-position: right 1em bottom 2px;

已确认可在以下位置工作：

Confirmed to work in:

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

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

截至2013年4月，只有IE6-8和一些附带的浏览器不支持。

As of April 2013, only IE6-8 and some fringe browsers lack support.

这里有一个测试页： http://jsbin.com/osoju​​z/1/edit

这篇关于从右边放置背景图像1em？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！