解读CSS的背景(background)样式

background-color:

可以为所有的元素设置背景色,这个属性接受任意合法的颜色值,如果希望背景色从元素文本向外少有延伸,只需增加一些内边距(padding)。

注意:background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。事实上,所有背景属性都不能继承。

background-image:

background-image 属性的默认值是 none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

background-repeat:

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。

background-position:

利用background-position可以改变图像在背景中的位置,background-position的属性有很多方法,下面详细解读:

关键字:

图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。

百分数值:

默认值是 0% 0%,在功能上相当于 top left,这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。如果你提供的属性值是50% 50%,这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。

长度值:

长度值解释的是元素内边距区左上角的偏移,偏移点是图像的左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐,可以结合函数第四象限坐标来理解。

注意:需要把 background-attachment 属性设置为 "fixed",才能保证position属性在 Firefox 和 Opera 中正常工作。

background-attachment

background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。

关于背景属性,你还可以使用简写属性来将所有背景属性设置在一个声明之中。举个栗子:

body{ background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}

上一篇:django模型层优化(关联对象) 懒加载和预加载 +长链接


下一篇:Swift 学习一函数&函数属性&懒加载