web前端开发个人技术博客
当前位置: HTML/CSS > 定位偏移背景图像的方法

定位偏移背景图像的方法

2019-01-29 分类:HTML/CSS 作者:码云 阅读(4243)

如果我们想使用CSS的background-image去定位一个距离左边20px,距离上边10px是非常容易的,你只需要实用如下方法即可:

1
background-position: 20px 10px;

但是如果我们想定位一个背景图像距离右边20px,距离下边10px,该怎么做呢?

我们还假设我们不知道元素的确切宽度和高度,这很可能是由于流畅的布局和动态内容。如果我们这样做了,我们可以做一些简单的数学运算,然后使用普通的background-position语法。

根据上面的要求,我总结了三种方法去实现定位元素。

background-position的四值语法

这是最简单的方法。将长度值与任何top/right/bottom/left关键字(而不是中心)组合。举个例子:

1
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()属性介绍以及自适应布局使用方法》,大家可以去看看。

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

此方法对浏览器支持稍微好一点,Chrome回到19+,Firefox回到4+,Safari回到6+(所有前缀)。

Android浏览器与上面的四值语法具有相同的支持。

使用JavaScript

如果我们想需要完美的浏览器支持,我想唯一的方法是JavaScript。测量元素的高度/宽度,知道其背景图像大小,然后根据需要调整CSS。

使用jQuery:

1
2
3
4
5
6
7
var el = $(".example"),
    bgWidth = 20,
    bgHeight = 20;

el.css({
  "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) +  "px"
});

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

定位偏移背景图像的方法

「如果觉得我的文章对您有用,请帮助本站成长」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - 定位偏移背景图像的方法

  1. 高大爷 Linux Chrome 62.0.3202.84

    这个方法不错

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @高大爷感谢认可

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流