CSS可以很方便地插入圖片到網頁上來。想了解怎么做嗎?看看下面的代碼!
background-image: url("image.jpg"); background-repeat: no-repeat; background-size: cover;
你注意到了嗎?這個代碼片段是用CSS語言編寫的。它告訴瀏覽器去加載一個名為“image.jpg”的圖片,然后使用這張圖片設定網頁的背景。同時這個代碼還設置了圖片的重復規則和縮放方式。
下面是逐條解釋:
background-image: url("image.jpg");
這行代碼的作用告訴瀏覽器要加載哪張圖片,用url()函數把圖片文件的路徑包起來。
background-repeat: no-repeat;
這行代碼控制圖片的重復規則。no-repeat告訴瀏覽器不要在網頁上重復這張背景圖。
background-size: cover;
這行代碼設定圖片的寬高縮放規則。cover告訴瀏覽器讓這張圖片按比例放得剛好充滿整個網頁背景,而不會產生留白。
現在是不是覺得CSS插入圖片非常簡單?趕快嘗試一下,讓自己的網頁更美觀吧!
上一篇css表格表頭怎么做
下一篇css表白代碼鼠標點擊