<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景圖片和插入圖片區別</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>
Web全棧-背景圖片和插入圖片區別
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。