Question

据我所知，无法从任何块的右边框放置CSS背景图像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允许您将锚点从左上角更改为您想要的任何内容。例如，以下内容将从右侧设置图像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

Answer 2

位置元素：绝对;可以通过他们的右边缘定位。所以，如果您不介意对html进行微小更改，请执行以下操作：

<div id="the-box">
    <img id="the-box-bg" src="bar.png" />
    Text text text text....
</div>
(...)
#the-box {
    position: relative;
}
#the-box-bg {
    position: absolute;
    right: 1em;
    z-index: -1;
}

你当然也可以使用具有重复背景的第二个div的绝对定位。但是你必须在CSS中设置（内部）div的大小。

Answer 3

您可以尝试这样的事情：

<style type="text/css" media="screen">
    #outer {
        position: relative;
        top: -1em;
        left: -1em;
        margin: 1em 0 0 1em;
        outline: thin solid #F00;
        background: url(http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png) no-repeat 100% 100%;
    }
    #inner {
        outline: thin solid #0F0;
        position: relative;
        top: 1em;
        left: 1em;
    }
</style>

<div id="outer">
    <div id="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

修改：期待CSS 3 background-position。

Answer 4

经过一些研究后，背景位置的实际x像素长度始终从元素的左侧开始计算。使这项工作（不使用其他元素）的唯一方法是使用javascript，计算给定元素宽度的左边长度：

var rightMargin = "10"; // in pixels
var imageWidth = "16";
var left = element.style.clientWidth - imageWidth - rightMargin;

element.style.backgroundPosition = "0px " + left + "px";

从右边放置背景图像1em？

4 个答案: