据我所知,不可能从任何块的右边框放置CSS背景图像1em,也不可能从底部放置图像1em.
<div class="foo" style="background: url('bar.png') no-repeat 1em 2em">
Some text here
</div>
如果CSS的大小是动态的,并且假设您不能更改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=""> </div>
Some text here
</div>
解决方法
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
