CSS教程(1):学习CSS背景相关知识

2020-05-11 07:46:41易采站长站整理

长度值

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

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

body

{

background-image:url(‘/i/eg_bg_03.gif’);

background-repeat:no-repeat;

background-position:50px 100px;

}

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

背景关联

如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:

body

{

background-image:url(/i/eg_bg_02.gif);

background-repeat:no-repeat;

background-attachment:fixed

}

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。