【CSS揭秘】案例3、灵活的背景定位

迈不过友情╰ 2022-06-08 08:52 125阅读 0赞

## background-position ##

<table> 
 <tbody> 
  <tr> 
   <td><b>定义和用法</b></td> 
  </tr> 
 </tbody> 
</table>

background-position 属性设置背景图像的起始位置。  
如：`background-position: right 20px bottom 10px;`

[http://www.w3school.com.cn/cssref/pr\_background-position.asp][http_www.w3school.com.cn_cssref_pr_background-position.asp]

--------------------

## background-origin ##

<table> 
 <tbody> 
  <tr> 
   <td><b>定义和用法</b></td> 
  </tr> 
 </tbody> 
</table>

background-origin 属性规定 background-position 属性相对于什么位置来定位。 每个元素身上都存在三个矩形框： !\[这里写图片描述\](https://img-blog.csdn.net/20170920184510414?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpcnVpXzE5OTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) 默认情况下，background-position是以内边距的外沿框（padding box）为准的。

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景图像相对于内边距框来定位。</td> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>背景图像相对于边框盒来定位。</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景图像相对于内容框来定位。</td> 
  </tr> 
 </tbody> 
</table>

[http://www.w3school.com.cn/cssref/pr\_background-origin.asp][http_www.w3school.com.cn_cssref_pr_background-origin.asp]

--------------------

## calc() ##

用于动态计算长度值。  
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；  
任何长度值都可以使用calc()函数进行计算；  
calc()函数支持 “+”, “-“, “\*”, “/” 运算；  
calc()函数使用标准的数学运算优先级规则

[http_www.w3school.com.cn_cssref_pr_background-position.asp]: http://www.w3school.com.cn/cssref/pr_background-position.asp
[http_www.w3school.com.cn_cssref_pr_background-origin.asp]: http://www.w3school.com.cn/cssref/pr_background-origin.asp