Board logo

标题: CSS Backgrounds关键字 [打印本页]

作者: vicky.yu    时间: 2024-3-4 09:47     标题: CSS Backgrounds关键字

图像放置关键字最容易理解的作用就像其名字的意义。例如,top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字:一个对应水平方向,另一个对应垂直方向,那么你可以设置位置关键字以任何顺序出现。

如果只有一个关键字,则会默认另一个关键字为 center。

所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:

p        

{background-image:url('img_tree.png');        

background-repeat:no-repeat;            

background-position:top;}

下面是等价的位置关键字:

单一关键字        等价的关键字
center        center center
top        top center 或 center top
bottom        bottom center 或 center bottom
right        right center 或 center right
left        left center 或 center left
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,你可以按照下面的代码进行设置:

body

{background-image:url('img_tree.png');  

background-repeat:no-repeat;   

background-position:50% 50%;}

这会导致图像适当放置,其中心与其元素的中心对齐。

因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:

body      

{background-image:url('img_tree.png');   

background-repeat:no-repeat;   

background-position:66% 33%;}

长度值
长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:

body

{background-image:url('img_tree.png');

background-repeat:no-repeat;

background-position:50px 100px;}

注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。




欢迎光临 赛捷软件论坛 (http://sagesoft.cn/bbs/) Powered by Discuz! 7.2