标题: 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