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背景了。
本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。
0