前端技术交流群:565733884

定位偏移背景图像的方法

前端技术 码云 71℃ 0评论

如果我们想使用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"
});

最终三种方法实现的效果如下:

定位偏移背景图像的方法

转载请注明:码云笔记 » 定位偏移背景图像的方法

喜欢 (5)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 这个方法不错
    高大爷2019-02-15 11:40 回复