第11章+css颜色和背景摘要.pptVIP

第11章 css颜色和背景 目录 1背景色 背景色 可以使用 background-color 属性为元素设置背景色。 这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色： p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padding: 20px;} 可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。 也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。 实例1:为元素设置背景颜色 html head style type=text/css body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} /style /head body h1这是标题 1/h1 h2这是标题 2/h2 p这是段落/p p class=no2这个段落设置了内边距。/p /body /html 实例2:设置部分文本的背景颜色 html head style type=text/css span.highlight{ background-color:yellow } /style /head body p span class=highlight这是文本。/span 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 span class=highlight这是文本。/span /p /body /html 2背景图像 background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。 实例 body { background-image: url(bgimage.gif); background-color: #000000; } 提示： 请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。 将图像设置为背景 html head style type=text/css body {background-image:url(/i/eg_bg_04.gif);} /style /head body/body /html 3背景重复 背景重复 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。 repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。 默认地，背景图像将从一个元素的左上角开始。请看下面的例子： body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; } html head style type=text/css body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } /style /head body /body /html 4背景关联 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响： body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed } background-position 属性 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-ima