您的位置：首页 > Web前端 > HTML

Html学习笔记---background-image及img导入图片比较

2018-02-14 10:04 489 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>background</h2>
<ol>
<p><li>backgound-image:你设置多大的像素，会自动铺满</li></p>
<div style="background-image:url('image/logo.png');height:120px"></div>
<p><li>backgrund-repeat:no-repeat;repeat-y;repeat-x</li></p>
<div style="background-image:url('image/logo.png');height:120px;background-repeat:repeat-y"></div>
<p><li>background-position:-x;-y</li></p>
<div style="background-image:url(image/qqbq.png);background-repeat:no-repeat;height:33px;width:29px;background-position-x:0px ;background-position-y:0px;"></div>
<p><li style="color:red">简写background:url position-x position-y no-repeat</li></p>
<div style="background:url(image/qqbq.png) 0px -40px no-repeat;height:33px;width:29px;"></div>

</ol>

</body>
</html>

通过 img 导入图片比较

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

overflow:auto,style样式中的width和height有效，图片有滚动条
<div style="width:300px;height:100px;overflow:auto">
<img src="image/3.jpg" />
</div>
overflow:hidden，style样式中的width和height有效,图片没有滚动条
<div style="width:300px;height:100px;overflow:hidden">
<img src="image/3.jpg" />
</div>
没有overflow样式，style样式中的width和height无效，图片变成默认大小,但是由于你的div高度为200px；所以下面的div覆盖
<div style="width:300px;height:100px;">
<img src="image/3.jpg" />
</div>
<div style="height:30px;background-color:red;color:red">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航