本文介绍如何使用CSS将图片设置为背景，并对比了将其作为普通元素插入的区别。通过具体示例展示了如何利用background-image属性实现这一效果。
让图片 作为背景
使用 background-image：url（image path）
示例如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景色</title>
<style>
.box{
margin:50px auto;
border:5px solid #000;
width:380px;
height:270px;
background-image: url(22.png);
font-size:30px;
text-align:center;
}
</style>
</head>
<body>
<div class="box"> i love you </div>
</body>
</html>
效果图：
总结下：
- 图片作为背景， 并且默认是循环的平铺，
- 字体在图片的上边，不会被背景图片掩盖， 也就是 不占用文档流的位置。
插入图片
<div class="box2"><image src="22.png"> i love you </div>
通过比较 可以看出 第二个方法 字体 没有漂浮在图片上边， 显然 没有当作背景 ，当成文档流的一部分。
扫一扫
7177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
