背景图像- 设置定位与不平铺
如果你不想让图像平铺，你可以使用
实例body {background-image:url('img_tree.png'); background-repeat:no-repeat;} 以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。 可以利用
实例body {background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top;} 提示：为
关键字图像放置关键字最容易理解的作用就像其名字的意义。例如，
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。 如果只有一个关键字，则会默认另一个关键字为
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下： p {background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top;} 下面是等价的位置关键字：
百分数值百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，你可以按照下面的代码进行设置： 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": 实例body {background:#ffffff url('img_tree.png') no-repeat right top;} 当使用简写属性时，属性值的顺序为：:
以上属性无需全部使用，你可以按照页面的实际需要使用. |
Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )
GMT+8, 2025-5-1 06:37 , Processed in 0.113145 second(s), 18 queries .
Powered by Discuz! X3.4
© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】
让背景图像不影响文本的排版