第11章+css颜色和背景

1、CS第11章 css颜色和背景田兵软件工程系WEB DESIGNSC目录目录11.111.3WEB DESIGNSC1背景色背景色v背景色背景色 可以使用 background-color 属性为元素设置背景色。 这个属性接受任何合法的颜色值。v这条规则把元素的背景设置为灰色：这条规则把元素的背景设置为灰色： p background-color: gray;v如果您希望背景色从元素中的文本向外少有延伸，只需如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：增加一些内边距： p background-color: gray; padding: 20px;WEB DESIGNSCv

2、可以为所有元素设置背景色，这包括可以为所有元素设置背景色，这包括 body 一直到一直到 em 和和 a 等行内元素。等行内元素。 background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。 也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。WEB DESIGNSCv 实例实例1:为元素设置背景颜色为元素设置背景颜色 body background-color: yellow h1 background-color: #00ff00 h2 background-color: transparen

3、t p background-color: rgb(250,0,255) p.no2 background-color: gray; padding: 20px; 这是标题 1 这是标题 2 这是段落 这个段落设置了内边距。 WEB DESIGNSCv 实例实例2:设置部分文本的背景颜色设置部分文本的背景颜色 span.highlight background-color:yellow 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文本。 这是文

4、本。 WEB DESIGNSC2背景图像背景图像vbackground-image 属性为元素设置背景图像。属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。v实例实例body background-image: url(bgimage.gif); background-color: #000000; v提示：提示： 请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。WEB DESIGNSCv将图像设置为背景将图像设置为背景 body background-

5、image:url(/i/eg_bg_04.gif); WEB DESIGNSC3背景重复背景重复v背景重复背景重复 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。vrepeat-x 和和 repeat-y 分别导致图像只在水平或垂分别导致图像只在水平或垂直方向上重复，直方向上重复，no-repeat 则不允许图像在任何方向则不允许图像在任何方向上平铺。上平铺。v默认地，背景图像将从一个元素的左上角开始。请看下默认地，背景图像将从一个元素的左上角开始。请看下面的例子：面的例子： body background-image: url(/i/eg_bg_0

6、3.gif); background-repeat: repeat-y; WEB DESIGNSCbody background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-yWEB DESIGNSC4背景关联背景关联v 如果文档比较长，那么当文档向下滚动时，背景图像如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。像就会消失。v 您可以通过您可以通过 background-attachment 属性防止属性防止这种滚动。通过这个属

7、性，可以声明图像相对于可视这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（区是固定的（fixed），因此不会受到滚动的影响：），因此不会受到滚动的影响：body background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed WEB DESIGNSCv background-position 属性属性 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果

8、要重复，将从这一点开始。 提示： 您需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。v 设置背景图像的起始位置。设置背景图像的起始位置。v 定位背景图像：定位背景图像：body background-image:url(bgimage.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center; WEB DESIGNSCbackground-position 属性设置属性设置 值值描述

9、描述top left top center top right center left center center center right bottom left bottom center bottom right如果您仅规定了一个关键词，那么第二个值将是center。默认值：0% 0%。x% y%第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。xpos ypos第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另

10、一个值将是50%。您可以混合使用 % 和 position 值。WEB DESIGNSCbackground-origin 属性vbackground-origin 属性规定 background-position 属性相对于什么位置来定位。v注释：注释： 如果背景图像的如果背景图像的 background-attachment 属性为属性为 “fixed”，则该属性没有效果。则该属性没有效果。v语法语法 background-origin: padding-box|border-box|content-box; vpadding-box背景图像相对于内边距框来定位。背景图像相对于内边距框来定

11、位。vborder-box背景图像相对于边框盒来定位。背景图像相对于边框盒来定位。vcontent-box背景图像相对于内容框来定位背景图像相对于内容框来定位WEB DESIGNSC实例：相对于内容框来定位背景图像：实例：相对于内容框来定位背景图像：vvvv vdivvvborder:1px solid black;vpadding:35px;vbackground-image:url(/i/bg_flower.gif);vbackground-repeat:no-repeat;vbackground-position:left;vv#div1vvbackground-origin:borde

12、r-box;vv#div2vvbackground-origin:content-box;vvvvvbackground-origin:border-box:vv这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本

13、。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。vvbackground-origin:content-box:vv这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

14、这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。vvvWEB DESIGNSCbackground-size 属性vbackground-size 属性规定背景图像的尺寸。属性规

15、定背景图像的尺寸。v语法：vbackground-size: length|percentage|cover|contain; 1.length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。2.percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。3.cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。4.contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适

16、应内容区域。v实例：规定背景图像的尺寸：实例：规定背景图像的尺寸：div background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; WEB DESIGNSCv实例：拉伸背景图像来完全覆盖内容区域。实例：拉伸背景图像来完全覆盖内容区域。 divbackground:url(/i/bg_flower.gif);background-size:35% 100%;-moz-background-size:35% 100%; /* 老版本的 Firefox */background-repe

17、at:no-repeat;这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。WEB DESIGNSCbackground-clip 属性v background-clip 属性规定背景的绘制区域。IE9+、Firefox、Opera、Chrome 以及以及 Safari 支持支持 background-clip 属性。属性。注释：Internet Explorer 8 以及更早的版本不支持以及更早的版本不支持 background-clip 属性。属性。v 语法 background-clip: border-box|

18、padding-box|content-box; 1. border-box背景被裁剪到边框盒。背景被裁剪到边框盒。2. padding-box背景被裁剪到内边距框。背景被裁剪到内边距框。3. content-box背景被裁剪到内容框。背景被裁剪到内容框。v 实例：规定背景的绘制区域：规定背景的绘制区域：div background-color:yellow; background-clip:content-box; WEB DESIGNSCv实例：规定背景的绘制区域：实例：规定背景的绘制区域： divwidth:300px;height:300px;padding:50px;backgrou

19、nd-color:yellow;background-clip:content-box;border:2px solid #92b901;这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这

20、是文本。这是文本。WEB DESIGNSCbackground 属性v background 属性可以 简写属性在一个声明中设置所有的背景属性。 所有浏览器都支持所有浏览器都支持 background 属性。属性。 注释：IE8 以及更早的浏览器不支持一个元素多个背景图像。以及更早的浏览器不支持一个元素多个背景图像。 注释：IE7 以及更早的浏览器不支持以及更早的浏览器不支持 “inherit”。IE8 需要需要 !DOCTYPE。IE9 支持支持 “inherit”。v 可以设置如下属性： background-color background-position background-siz

21、e background-repeat background-origin background-clip background-attachment background-imageWEB DESIGNSCv如果不设置其中的某个值，也不会出问题，如果不设置其中的某个值，也不会出问题， 比如 background:#ff0000 url(smiley.gif); 也是允许的。v通常建议使用这个属性，而不是分别使用单个属性，因通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。且需

22、要键入的字母也更少。WEB DESIGNSC值值描述描述CSSbackground-color规定要使用的背景颜色。1background-position规定背景图像的位置。1background-size规定背景图片的尺寸。3background-repeat规定如何重复背景图像。1background-origin规定背景图片的定位区域。3background-clip规定背景的绘制区域。3background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。1background-image规定要使用的背景图像。1inherit规定应该从父元素继承 background 属性的设置。1WEB DESIGNSCv本例演示如何使用简写属性来将所有背景属性设置在一个声本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。明之中。body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。