<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>38-背景圖片和插入圖片區別</title> <style> div{ /*width: 150px;*/ /*height: 170px;*/ width: 300px; height: 300px; background-color: red; } .box1{ background-image: url(images/girl.jpg); background-repeat:no-repeat; background-position: right bottom; } </style> </head> <body> <!-- 1.背景圖片和插入圖片區別? 1.1 背景圖片僅僅是一個裝飾, 不會占用位置 插入圖片會占用位置 1.2 背景圖片有定位屬性, 所以可以很方便的控制圖片的位置 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便 1.3 插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那么推薦使用插入圖片 --> <div class="box1">我是文字</div> <div class="box2"> <img src="images/girl.jpg" alt=""> 我是文字 </div> </body> </html>