backgroud-positon使用百分比的定位十分怪异,它的值实际计算值并非与容器的宽度或者高度相乘。
background-positon中容器坐标定位与百分比定位的换算:
a——background-position的百分比数值;Px——容器坐标的定位位置;Dx——容器的宽(高)度值;dx——图片的宽(高)度值;换算公式:图片的background-position在容器坐标内的水平位置 Px用含百分比的calc()函数来表示: (100% - Po)或者直接计算百分比: Px / (Dx - dx)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width:300px;height:300px;
margin:100px;
background:url(没有脚的人.png) no-repeat;
background-color:red;
background-size:100px 100px;
}
#div1{
background-position:100% 0;
}
#div2{
background-position: 200px 0;
}
</style>
<script>
window.οnlοad=function()
{
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
对比图