网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例8知识点01：设置背景颜色及背景图像

我们毕业啦其实是答辩的标题地方设置背景颜色及背景图像网页能通过背景颜色或背景图像给人留下深刻的第一印象，如节日题材的网站一般采用喜庆、祥和的图像来突出效果，所以在网页设计中，控制背景颜色和背景图像是很重要的内容。设置背景颜色及背景图像设置背景颜色设置背景颜色的语法格式如下。background-color:#RRGGBB或rgb(r,g,b)或预定义的颜色值;设置背景颜色及背景图像设置背景图像设置背景图像的语法格式如下。background-image:url(图像来源);例8-1

example01.html设置背景颜色及背景图像默认情况下，背景图像从元素的左上角自动沿着水平和竖直两个方向平铺，充满整个网页。设置背景图像平铺设置元素的背景图像如何铺排填充。格式如下。background-repeat:repeat|no-repeat|repeat-x|repeat-y|space|round;设置背景颜色及背景图像repeatno-repeatrepeat-xrepeat-yspaceround设置背景图像位置设置元素的背景图像位置。格式如下。background-position:关键字|百分比|长度;设置背景颜色及背景图像说明：（1）关键字：在水平方向上有left、center和right，垂直方向上有top、center和bottom。（2）百分比、长度：指定两个值，分别代表水平位置和垂直位置。设置背景图像固定设置或检索背景图像是随元素滚动还是固定的。格式如下。background-attachment:scroll|

fixed|local;设置背景颜色及背景图像说明：scroll：背景图像相对于其所在的元素固定，也就是说当元素内容滚动时，背景图像不会跟着滚动，因为背景图像总是跟着元素本身，但会随元素的祖先元素或窗体一起滚动。默认值为scroll。fixed：背景图像相对于浏览器窗口固定。local：背景图像相对于元素内容固定，也就是说当元素内容随元素滚动时，背景图像也会跟着滚动，因为背景图像总是要跟着内容（CSS3新增关键字）。设置背景图像的大小检索或设置对象的背景图像的尺寸大小。格式如下。background-size:长度|百分比|auto|

cover|

contain;设置背景颜色及背景图像说明：长度：用长度指定背景图像大小，不允许为负值。百分比：用百分比指定背景图像大小，不允许为负值。auto：背景图像的真实大小，默认值为auto。cover：将背景图像等比缩例放到完全覆盖容器，背景图像有可能超出容器。contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终包含在容器内。设置背景图像的大小设置背景颜色及背景图像长度和百分比如果提供两个值，则第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度；如果只提供一个，则该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图像以提供的宽度作为参照来等比例缩放。注意综合设置背景设置背景颜色及背景图像background属性可以综合设置元素的背景颜色和背景图像，并可以设置背景图像是否重复、位置、固定、大小等。某些属性值省略时以默认值的方式显示。语法格式如下。background:背景颜色url("图像")

重复

位置

固定

大小;（1）所有属性值在书写时顺序不限。（2）如果同时设置了position和size两个属性，则应该用“/”而不是用空格把两个属性值隔开，即“position/size”。（3）设置元素的背景颜色和背景图像时建议使用综合属性background一次性设置