定位偏移背景图像的方法

目录
文章目录隐藏
  1. background-position 的四值语法
  2. 使用 calc()
  3. 使用 JavaScript

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

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

定位偏移背景图像的方法

 

「点点赞赏,手留余香」

7

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 定位偏移背景图像的方法

2 评论

  1. 这个方法不错

回复 高大爷 取消回复