码云笔记前端博客
Home > HTML/CSS > 定位偏移背景图像的方法

定位偏移背景图像的方法

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

本文共计1093个字,阅读时间预计3分钟,干货满满,记得点赞加收藏哦

如果我们想使用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前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 471 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1033 个
  • 建站时间: 522 天
  • 访问总量: 8680900 次
  • 最近更新: 2019年11月15日