[css 揭秘]:CSS揭秘 技巧(三):背景定位

时间:2022-05-27 20:26:14

我的github地址:https://github.com/FannieGirl/ifannie

源码都在这上面哦!

喜欢的给我一个星吧

背景定位

问题:很多时候,我们想针对容器某个角对背景图片做便宜定位。
个人觉得,背景定位应用还是很广的,在实践中经常遇到。在实践中才会发现它的美,真是强大。

background-position的扩展语法方案

在css背景与边框中,background-position属性已经得到了扩展,它允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字。

例如:

[css 揭秘]:CSS揭秘 技巧(三):背景定位

[css 揭秘]:CSS揭秘 技巧(三):背景定位

效果演示地址:https://jsfiddle.net/Fannie/06sjmL6n/7/

上述方案在不支持background-position扩展语法的浏览器中,背景图片会紧贴在左上角,这看起来很奇怪啊!,如是想到一个回退的方案,就是把bottom right 定位值写进background的简写属性中。

background-origin 方案

有一种情况:偏移量与容器的内边距一致。如果用上述的方案,代码可能是这样的
[css 揭秘]:CSS揭秘 技巧(三):背景定位

效果是出现了,但是不够好,不容易维护(每次更改内边距的时候,需要改动三个值)。可能你就会想,让它自动跟着我们设计的内边距走,不用另外的声明偏移量的值

小知识点:每个元素都有三个矩形框,border Box | padding Box | content Box

在默认情况下,background-position 是以padding box 为准的。这样边框才不会遮住背景图片,因此 top left 默认是值padding box 的左上角。然而用background-origin 可以改变这种行为。如果我们把它的值改成 ceontent box ,我们在background-position 属性使用边角关键字将以内容区作为基准。就可以达到我们想要的效果

例如:

[css 揭秘]:CSS揭秘 技巧(三):背景定位

[css 揭秘]:CSS揭秘 技巧(三):背景定位

演示地址:https://jsfiddle.net/Fannie/06sjmL6n/8/

在必要的时候,其实这两种技巧组合起来,效果更加DIY了。

calc 方案

先get一下这个calc函数(我相信 很多人对它还是不那么熟悉的)
推荐看一篇博客,你就知道calc这个函数了:http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

知识点:请不要忘记在calc函数内部的 - 和 + 运算符两侧加上一个空白符,否则解析错误哦

然后,我们回归我们的问题:把背景图片定位到距离底边 10px 且距离右边 20px 的位置。
其实我们是不是希望它有一个 100% - 20px 的水平偏移量 以及 100% - 10px 的垂直偏移量。

例如:

[css 揭秘]:CSS揭秘 技巧(三):背景定位

[css 揭秘]:CSS揭秘 技巧(三):背景定位

演示地址:https://jsfiddle.net/Fannie/06sjmL6n/9/

calc 的web 段浏览器的支持还可以,但是移动端的支持不是很好哦!需要写兼容。

后言:
如果你对基础的知识点已经很熟悉,你可以自动跳过。写上去的原因是查漏补缺,巩固一下基础。
如果有不对的地方,欢迎你来吐槽。
本文主要参考《CSS 揭秘》一书 以及w3school;
参考链接 :http://www.w3school.com.cn/cssref/pr_background-clip.asp