[css]《css揭秘》学习-灵活的背景定位
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[css]《css揭秘》学习-灵活的背景定位相关的知识，希望对你有一定的参考价值。
一、background-position属性
使用该属性，在不确定容器大小的情况下，也可以指定图案距离容器边缘的位置；但是需要为不支持该属性的浏览器指定回退方案，否则，图案会默认放在左上角。
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>灵活的背景定位</title> 5 <style type="text/css"> 6 div{ 7 background:url(http://csssecrets.io/images/code-pirate.svg) 8 no-repeat bottom right #58a;/*bottom right是指定的回退方案，避免放在左上角*/ 9 10 background-position: right 20px bottom 10px; 11 12 max-width:10em; 13 min-height: 5em; 14 padding:10px; 15 color:white; 16 font:100% / 1 sans-serif; 17 } 18 </style> 19 </head> 20 <body> 21 <div></div> 22 </body> 23 </html>
二、content-box
每个元素都存在3个矩形边框，border-box，padding-box，content-box，默认情况下，背景图片是从padding-box开始放置的。
如果增加一个属性值：
background-position: content-box，则背景图片将从content box的位置开始放置，通过这样的方式，也可以实现内边距的效果。
三、calc()函数
距离右边和下面各有20px的偏移量，其实就是距离上面和下面各有（100% - 20px）的偏移量；可以使用calc函数，注意在 +/- 前后需要各加一个空格。
background-position: calc(100% - 20px), calc(100% - 20px);
以上是关于[css]《css揭秘》学习-灵活的背景定位的主要内容，如果未能解决你的问题，请参考以下文章