html顯示圖片的方法:1、使用img標籤,語法「 」;2、給指定元素加上「background-image:url(圖片檔案地址);”樣式。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
html顯示圖片的方法
#方法1:使用img標籤插入圖片
#在HTML中,可以使用img 元素在網頁中嵌入一幅圖片。
請注意,從技術上講, 標籤並不會在網頁中插入圖像,而是從網頁上連結圖片。 標籤創建的是被引用圖像的佔位空間。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="img/1.jpg" style="max-width:90%" / alt="html如何顯示圖片" > </body> </html>
方法2:使用css background-image屬性
只需要給指定元素新增「background-image:url(圖片檔案位址);」樣式即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div{ width: 500px; height: 300px; background-image: url(img/1.jpg); background-repeat: no-repeat; background-size: 400px; } </style> </head> <body> <div></div> </body> </html>
效果圖:
推薦教學:《html影片教學 》
以上是html如何顯示圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章!