在CSS中,插入一張圖片可以通過以下幾個步驟:
/* 定義一個class */ .example { /* 設置背景圖片,引用文件夾下的example.png */ background-image: url("/images/example.png"); /* 設置背景圖片重復方式 */ background-repeat: no-repeat; /* 設置背景圖片在容器中的位置 */ background-position: center center; /* 設置背景圖片大小 */ background-size: cover; }
解釋一下上面的代碼:
- background-image屬性設置背景圖片,使用url()引用圖片的URL。
- background-repeat屬性設置背景圖片的重復方式,可選值有no-repeat、repeat-x、repeat-y或repeat。
- background-position屬性設置背景圖片在容器中的位置。可以使用像素、百分比、關鍵字等方式設置位置。
- background-size屬性設置背景圖片的大小,可選值有cover、contain等。
值得注意的是,使用上述方法插入的圖片是背景圖片,不能在HTML中使用img標簽插入。此外,當容器的大小與背景圖片大小不同時,會對圖片進行自適應縮放。
上一篇css中lem是什么
下一篇python畫粗線條