css背景如何使用本地图片显示(css背景如何使用本地图片)

CSS背景常使用的方式是链接远程图片，但在一些特殊情况下，我们也需要在本地使用图片作为背景。下面介绍如何使用CSS在本地添加背景图片。

1. 准备图片素材

首先需要准备好需要作为背景的图片，通常我们将图片放在项目的img文件夹下。

2. 指定图片路径

background-image: url('../img/bg.jpg');

在CSS代码中，使用url指定图片的路径，其中../表示上一级目录，例如上例中我们将CSS和img文件夹分别放在项目的根目录和根目录下的img文件夹下。

3. 背景图片的大小和重复方式

background-size: cover; 
background-repeat: no-repeat;

background-size控制背景图片的大小，cover表示完整覆盖父元素，一般情况下使用此选项即可。background-repeat控制背景图片的重复方式，no-repeat表示不重复。

完整的CSS代码如下：

.container {
background-image: url('../img/bg.jpg');
background-size: cover; 
background-repeat: no-repeat;
}

这样就可以在本地使用图片作为CSS背景了。