背景与边框之“灵活的背景定位”

设计场景

---

• 针对元素的某个角对背景图片做偏移定位
• 希望图片和元素的边角之间能留出一定的空隙，类似内边距的效果

background-position 的扩展语法方案

---

结构

风格

.box {
    background: url(pracite.png) no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;
}

扩展：实现背景图片的水平垂直居中

background-position: right 50% bottom 50%;

说明

• 扩展的 background-position 语法，允许我们指定背景图片 距离任意角的偏移量 ，只需要在 偏移量前面指定方位关键字 即可
• 为了避免浏览器不支持扩展的语法，我们增加了 浏览器的回退方案，把 方位关键字 写进 background 的简写属性中

background-origin 方案

---

• 极其常见的一种情况：偏移量与容器的内边距一致

.box {
    padding: 10px;
    background: url(pracite.png) no-repeat #58a;
    background-origin: content-box;
}

说明

• background-origin 指定了背景开始绘制的位置

更多精彩文章请关注以下公众号

重修前端.jpg

《CSS SECRETS》