定位偏移背景图像的方法
如果我们想使用 CSS 的 background-image 去定位一个距离左边 20px,距离上边 10px 是非常容易的,你只需要实用如下方法即可:
background-position: 20px 10px;
但是如果我们想定位一个背景图像距离右边 20px,距离下边 10px,该怎么做呢?
我们还假设我们不知道元素的确切宽度和高度,这很可能是由于流畅的布局和动态内容。如果我们这样做了,我们可以做一些简单的数学运算,然后使用普通的 background-position 语法。
根据上面的要求,我总结了三种方法去实现定位元素。
background-position 的四值语法
这是最简单的方法。将长度值与任何 top/right/bottom/left 关键字(而不是中心)组合。举个例子:
background-position: right 20px bottom 10px;
使用此方法,可以从背景图像元素的四个角中的任何一个偏移 a 。
根据 MDN 的浏览器支持:Chrome 25 +,Firefox 13 +,IE 9 +,Opera 10.5 +,Safari / iOS 7+。最大的危险是 Android。
我测试了 Android 4.0,4.1 和 4.2,但它没有用。但 Android 4.4 确实支持它。
使用 calc()
可以继续使用双值语法 background-position,但使用通过创建的长度来执行此操作 calc()。关于 cale()的相关知识之前我写过一篇文章《css3 cale()属性介绍以及自适应布局使用方法》,大家可以去看看。
background-position: calc(100% - 20px) calc(100% - 10px);
此方法对浏览器支持稍微好一点,Chrome 回到 19+,Firefox 回到 4+,Safari 回到 6+(所有前缀)。
Android 浏览器与上面的四值语法具有相同的支持。
使用 JavaScript
如果我们想需要完美的浏览器支持,我想唯一的方法是 JavaScript。测量元素的高度/宽度,知道其背景图像大小,然后根据需要调整 CSS。
使用 jQuery:
var el = $(".example"), bgWidth = 20, bgHeight = 20; el.css({ "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px" });
最终三种方法实现的效果如下:
码云笔记 » 定位偏移背景图像的方法
这个方法不错
感谢认可