在CSS中添加正常圖片非常簡單,通過使用CSS中的background-image屬性,可以將任何圖像嵌入到HTML元素中。示例代碼如下:
#myElement { background-image: url("image.jpg"); }
以上代碼指定了該元素的背景圖像為名為image.jpg的文件。可以用絕對或相對路徑指定文件路徑。例如,以下代碼將使用相對路徑將圖像作為HTML文件與圖像文件在同一目錄下的背景。
#myElement { background-image: url("./image.jpg"); }
它也允許使用帶有路徑的完整URL。例如,以下代碼將從指定的URL加載圖像以作為元素的背景。
#myElement { background-image: url("https://example.com/image.jpg"); }
此外還可以在CSS中在指定背景圖像時同時指定背景顏色,如下例所示:
#myElement { background-color: #ffffff; background-image: url("image.jpg"); }
在上述示例代碼中,#ffffff表示白色背景。如果圖像未能加載,指定的背景顏色將是可見的。
下一篇css中浮動的介紹