CSS实现背景图片右侧定位的5种小技巧

2023-12-13 15:46| 来源: 网络整理| 查看: 265

说到背景图片右侧定位，大家一定会想到使用background-position属性来实现。

底部定位同理，本文以右侧为例

下面，我们先来简单看一下background-position的基本用法及注意事项。

background-position属性的值既可以使用关键字，也可以是像素、em或百分比，可以指定两个值，分别表示相对于左侧的偏移量和相对于顶部的偏移量。关键字包括用于 x 轴的left/cener/right和用于 y 轴的top/center/bottom，规范没有约定两个值的先后顺序。不过歪马建议大家不管使用什么值，都先指定 x 轴，再指定 y 轴。

使用像素和em与使用百分比进行背景定位时，计算方式是不一样的。使用像素和em时，会一直以图片的左上角相对于父元素（左侧和顶部）来计算。使用百分比时，则是以图片中对应比例的点定位到父元素对应比例的点。百分比的定位效果如下：

百分比的定位效果(图片来源W3C)

此外，还需要注意，关键字和其他值不可以混用，否则会失效。

至此，我们简单过了下background-position的用法和注意事项。接下来，我们思考一下如何实现如下的效果，即背景图片右侧定位。

背景图片右侧定位

首先，根据上面介绍的单位和关键字，我们应该无法实现背景图片右侧定位，且图片周围留有一定的空白间隙。我们没法用像素/em/百分比，因为不知道该距离左侧多远，关键词也无法预留间距。

如果你不知道该怎么实现的话，我们一起来看看 5 种实现这一效果的小技巧吧。

1. 伪实现：嵌套元素实现类似效果

通过元素嵌套的方式，我们可以很容易实现这样的布局，外层元素加padding，flex布局、绝对定位、float这些方式都能实现，实现方式较为简单，这里我就不放代码了。

这类实现方式，由于嵌套了元素，并不是我们想要的实现效果。所以这是一种伪实现。

2. 蹩脚的实现：背景图片右侧添加透明像素

上图的效果中，图片右侧有10px的空隙，我们可以通过改变背景图，在右侧加上10px宽的透明像素，然后借助background-position的关键字就能实现上述的效果了。代码如下：

.bg-right { width: 500px; height: 120px; padding: 10px; margin: 50px auto; box-sizing: border-box; border: 10px solid rgba(255, 160, 122, 0.3); /* 背景图右侧添加10px宽透明像素（注释一下，其实url对应的图片并没有加） */ background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat; /* 改变背景元素尺寸，原为80x80px */ background-size: 90px 80px; line-height: 80px; font-size: 20px; background-position: right center; }

这种方式，借助常规的方式就能实现上述效果，但是需要对背景图进行改动，如果空白间隙大小调整，就需要调整背景图，所以比较麻烦。不过，这个方法的好处是，兼容性很好。

3. 借助 calc()函数实现

CSS 中，我们可以借助calc()函数来进行加减乘除(+-*/)操作，并且可以进行混合单位的运算。

所以借助这一函数，我们可以如下实现：

.bg-right { /* ... */ background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat; background-size: 80px 80px; background-position: calc(100% - 10px) 50%; }

注意其中加号和减号两次需要添加空格，这是为了和负号作区分。

这一方法总的来说兼容性还好，只不过 IE9 在calc()和background-position结合使用的时候会导致浏览器崩溃，所以如果你要兼容 IE9，不要使用该方法。

这种方式也有个不便利的地方时，calc()中减去的10px与padding相同，如果padding调整，这里也要调整。

4. 使用 background-position 的新语法

在CSS Backgrounds and Borders Module Level 3[1]中，background-position引入了新语法，可以先写边界关键字，再写长度值。如下，我们可以这样实现：

.bg-right { /* ... */ background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center; background-position: right 10px top 50%; }

该方法不支持 IE8 和 Safari7。不过我们可以通过上面的方式，在background缩写语法中，加入right center来作为后备，实现优雅降级。

该方法与使用calc()一样，如果padding调整，这里也要调整。

5. 使用 background-origin 指定背景图片摆放的参考位置

background-origin可以指定背景图片摆放的参考位置。支持以下三个值：border-box|padding-box|content-box。默认值为padding-box。

如果指定为border-box，则背景图会和边框重叠。如下所示：

背景图和边框重叠

通过content-box就可以实现我们前面所要的效果，代码如下。

.bg-right { /* ... */ background: url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg) no-repeat right center; background-origin: content-box; }

这个方法比较简洁明了，并且在padding发生变化时，无需做其他调整，所以最推荐这种。但是如果距离右边的距离大于padding的话，还是得借助第二和第三种方法。

至于兼容性，也是 IE8 及更早的浏览器不支持，Safari 支持性还好。

关于背景图片实现右侧定位，今天就简单介绍这 5 种方法，希望能对你有帮助。

参考链接Positioning Offset Background Images[2]CSS 秘密花园：灵活的背景定位[3]参考资料

[1]CSS Backgrounds and Borders Module Level 3: https://www.w3.org/TR/css-backgrounds-3/

[2]Positioning Offset Background Images: https://css-tricks.com/positioning-offset-background-images/

[3]CSS 秘密花园：灵活的背景定位: https://www.w3cplus.com/css3/css-secrets/flexible-background-positioning.html

【本文地址】

公司简介

联系我们