背景图的定位技巧

如果你想定位一个背景图片,让它距离左边20px,距离顶部10px,这用CSS很容易实现。你的做法就是background-position: 20px 10px;。但是,如果你想定位的位置是距离右边20px,距离底部10px,那该怎么办?

我们还假设了一种情况,就是我们不知道这样元素或页面的宽度和高度,通常,流式布局页面和动态内容页面都是这种情况。在这种情况下,如果要实现上面描述的需求,我们需要运用一些数学技巧来计算背景图片的偏移量,但仍然是使用background-position语法。

这种背景设计需求其实是很常见,我们有好几种方法能实现这个需求。

使用background-position的四个值语法

这是最简单的方法。你可以在值中使用 top/right/bottom/left 四个预定义关键字。例如:

background-position: right 20px bottom 10px;

这样,你就指定了距离右边20px,底部10px;

至于浏览器支持情况, 根据MDN:Chrome 25+, Firefox 13+, IE 9+, Opera 10.5+, Safari/iOS 7+。最大的问题是安卓。

我测试过 Android 4.0, 4.1 和 4.2,都不行。 Android 4.4 没问题。

使用 calc()

如果坚持使用2个值的background-position语法,我们需要使用calc()。比如:

background-position: calc(100% - 20px) calc(100% - 10px); 

这种写法的浏览器支持情况稍微好一些,谷歌浏览器19+, Firefox 4+ 和 Safari 6+ (全部需要使用浏览器引擎前缀)。

安卓原生浏览器对它的支持跟4值语法一样。

使用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"
});

实例演示

所有三种技术的演示

阅读余下内容
 

一条回应:“背景图的定位技巧”

发表评论

电子邮件地址不会被公开。 必填项已用*标注


京ICP备12002735号