据我所知,不可能将 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=""> </div>
Some text here
</div>
The CSS3 背景位置规范 http://www.w3.org/TR/css3-background/#background-position允许您将锚点从左上角更改为您想要的任何位置。例如,以下将设置图像的下下角距右侧 1em,距底部 2px:
background-position: right 1em bottom 2px;
已确认工作于:
IE9/10、火狐 13+、Chrome 26+、Opera 11+、Seamonkey 2.14+、Lunascape 6.8.0
截至2013年4月,仅IE6-8及部分边缘浏览器缺乏支持。
这是一个测试页面:http://jsbin.com/osojuz/1/edit http://jsbin.com/osojuz/1/edit
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)