在开发网页时,经常要通过设置背景图来美化网页的样式,CSS提供了多种方式来实现这个目标。
其中,最基本的方式是使用background-image属性来添加背景图。其语法如下:
background-image:url('图片地址');
其中,图片地址需要填写正确的图片路径。如果网页中有多个元素需要添加背景图,我们可以使用通配符*来选择所有元素,如下:
* { background-image: url('图片地址'); }
另外,我们还可以通过设置背景重复、位置等属性来控制背景图的展示效果。常用的属性包括:
background-repeat: no-repeat; //不重复显示图片 background-position: center top; //背景图居中显示 background-size: cover; //自适应铺满整个容器
例如,我们想在网页顶部添加一个背景图,并且让它居中显示且不重复,可以这样设置:
html, body { height: 100%; } header { background-image: url('图片地址'); background-repeat: no-repeat; background-position: center top; height: 100%; }
这样,我们就能成功添加一个美观的背景图了。