css的background属性小记
background 简写属性在一个声明中设置所有的背景属性。
可以按顺序设置如下属性:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
实例
如何在一个声明中设置所有背景属性:
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
background-color 属性设置元素的背景颜色。
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
边框与背景
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。
transparent 值
尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。
可能的值
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
提示:请设置一种可用的背景颜色,这样的话,假如背景图像不可用,页面也可获得良好的视觉效果。
background-repeat 属性设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。
可能的值
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
可能的值
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
可能的值
值 | 描述 |
---|---|
|
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% |
第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |