[Web前端技术教学]CSS背景图片位置的百分比解释
代码:
background:#FFF url(image) no-repeat fixed 50% -30%;
解释:
这个时候图片应该在盒子的什么位置呢,算法公式如下:
图片左顶点距盒子左顶点的坐标位置为:
x:(盒子的宽度-图片的宽度)x 50% y:(盒子的高度-图片的高度)x (-30%)
得到的结果应用坐标法则,差值如果为负数,百分比为正那么运算结果是负值。如果差值为负数,百分比也为负数,那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。
比如:盒子是width:600px;height:600px; 而图片是width:200px;height:200px;
我们用上面的样式,可以得到图片位置为:
x:(600px-200px) x 50% y:(600px-200px) x (-30%)
图示:
转载请注明原文地址: https://ju.6miu.com/read-680225.html