首页 > 软件下载 > UI设计

css百分数值介绍

2022-06-12

资源介绍

百分数值

百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:

body
 {
   background-image:url(/i/eg_bg_03.gif);
   background-repeat:no-repeat;    background-position:50% 50%;
 }

这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 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。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。

展开全部

版权声明

1 本站所有资源(含游戏)均是软件作者、开发商投稿,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!

2 本站资源下载后不得用于商业用途,所有资源请在下载后24小时内删除。

3 若有关在线投稿、无法下载等问题,请与本站客服人员联系。

4 如侵犯了您的版权、商标等,请立刻联系我们并具体说明情况后,本站将尽快处理删除,联系QQ:2499894784

最近更新

热门排行

最需网客户端 软件问题一手掌握

去 App Store 免费下载 iOS 客户端