设置背景图片是指使用CSS为整个页面或指定的HTML元素设置背景图片,在使用CSS插入背景图片后,还可以使用CSS的其他属性控制背景图,如设置背景图的位置,以及是否重复和固定等。在CSS中设置背景图片的属性如下。
插入背景图片:background-image;
设置背景图片的重复方式:background-repeat;
设置背景图片的位置:background-position;
固定背景图片:background-attachment;
1.插入背景图片
利用CSS插入背景图片的语法格式为:background-image:url(背景图片的路径和名称); 。背景图片的路径可以为绝对路径,也可以为相对路径,具体可参考第二章案例一支撑知识点中的讲解;网页中图片的格式一般为GIF、JPG或PNG。
2.设置背景图片的重复方式
使用background-repeat属性可以设置背景图片的重复方式,包括水平重复、垂直重复和不重复等,其语法格式为:background-repeat:属性值;
3.设置背景图片的位置
当背景图片不重复铺满其所在元素的区域时,可使用background-position属性设置背景图片位置,其语法格式为:background-position:属性值;
4.固定背景图片
如果页面比较长,则当网页向下滚动时,背景图像也会随之滚动,当网页滚动到超过图像的位置时,图像就会消失。为此,可利用background-attachment属性允许或防止这种滚动,其语法格式为:background-attachment:属性值;
5.背景样式综合设置
与border属性一样,也可以使用background属性将关于背景的各种属性值集成到一个语句中,中间用空格隔开,从而使CSS代码更简洁。