本文介绍了《CSS Secrets》中关于背景图像定位的三种解决方案：使用增强型`background-position`，设置`background-origin`，以及利用`calc()`函数。通过这些技巧，开发者可以更灵活地控制背景图片相对于元素边界的偏移，实现美观的布局效果。
《CSS Secrets》是@Lea Verou最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。
问题
我们经常遇见的一个问题就是，需要将背景图片定位到不同的位置，往往不仅是左上角，比如右下角。在 CSS 2.1 中，只能指定图片相对左上角的偏移量，或者使用关键字定位到其他的角落。不过，通常希望在背景图片和边角之间保留一些空间，避免类下图的效果。
因为图像和边缘之间没有间隔，所以 background-position: bottom right; 实现的效果通常并不美观
对于具有固定尺寸的容器，在 CSS 2.1 中是可以解决这个问题的，但是使用的技术比较杂乱：我们需要计算出背景图片相对左上角的偏移量，模拟出背景图片和左下角之间的间隙。但是，对于尺寸不固定的元素(由于内容不固定导致的尺寸不固定)，这种方法就无能为力了。开发者通常喜欢使用百分比设置背景位置，通常是略小于 100% 的值
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
