一、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);
时间: 2024-12-18 13:18:07