灵活的背景定位

背景知识：background-position的扩展语法，background-origin，calc()

1. background-position扩展语法

1. background-position扩展语法： css3 中background-position 语法可以通过在偏移量前指定关键字，来设置四条边的偏移量。

   background-positon: right 20px bottom 10px;
   

2. background-origin

1. background-origin： css3 中 background-origin 可以指定背景图片的显示范围，默认以padding-box为准，即padding的外边沿。此时背景图片的位置将和padding一致。通常此方案更适合开发需求。

   padding:20px;
   background-origin: content-box;
   background-position: 100% 100%;
   

3. calc()

1. calc()： 允许填入 任意 + - * / 四则运算组合的表达式。

   background-position: calc(100% - 20px) calc(100% - 10px);
   

扩展：border-box 边框的外边沿；padding-box 内边距的外边沿； content-box 内容的外边沿。

原效果

最终效果

下一篇：CSS揭秘：4.边框内圆角