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背景了。
上一篇php ttl
下一篇json怎么設置后臺