css百分数值介绍

百分数值的表现方式更为复杂 。假设你希望用百分数值将图像在其元素中居中,这很容易:
百分数值百分数值的表现方式更为复杂 。假设你希望用百分数值将图像在其元素中居中,这很容易:
body{background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:50% 50%;}【css百分数值介绍】这会导致图像适当放置,其中心与其元素的中心对齐 。换句话说,百分数值同时应用于元素和图像 。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐 。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角 。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角 。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body{background-image:url(/i/eg_bg_03.gif);background-repeat:no-repeat;background-position:66% 33%;}如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50% 。这一点与关键字类似 。
background-position 的默认值是 0% 0%,在功能上相当于 top left 。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值 。


以上就是css百分数值介绍,希望大家喜欢,请继续关注我们 。

    推荐阅读