首頁 >web前端 >html教學 >html如何顯示圖片

html如何顯示圖片

青灯夜游原創: 2021-10-11 15:52:1732570瀏覽

html顯示圖片的方法：1、使用img標籤，語法「」；2、給指定元素加上「background-image:url(圖片檔案地址);”樣式。

html如何顯示圖片

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

html顯示圖片的方法

#方法1：使用img標籤插入圖片

#在HTML中，可以使用img 元素在網頁中嵌入一幅圖片。

請注意，從技術上講， html如何顯示圖片標籤並不會在網頁中插入圖像，而是從網頁上連結圖片。標籤創建的是被引用圖像的佔位空間。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="html如何顯示圖片" >
	</body>
</html>

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影片教學》

以上是html如何顯示圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：html怎麼設定表格標題下一篇：html怎麼設定表格標題

看更多