[Web前端技术教学]CSS背景图片位置的百分比解释

    xiaoxiao2021-12-04  29

    [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

    最新回复(0)