CSS-background
一、Background-image
在元素中设置背景图片
（1）默认图片铺满整个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background1</title>
<style>
.bk{
height: 100px;
background-image: url("image/2.png");
}
</style>
</head>
<body>
<div class="bk"></div>
</body>
</html>
实际中的2.png图片是很小，只是其中的一竖条：
所以使用background-image，图片会充满整个元素，重复平铺
（2）background（no-repeate;repeate-x;repeate-y）
决定是否图片堆叠，也是重复放置图片
no-repeate：不堆叠
.bk_image{
position: fixed;
height: 100px;
top: 0;
right: 0;
left: 0;
background-image: url("image/2.png");
background-repeat: no-repeat;
}
只放置一张图片
repeate-x：水平堆叠
.bk_image{
position: fixed;
height: 100px;
top: 0;
right: 0;
left: 0;
background-image: url("image/2.png");
background-repeat: repeat-x;
}
repeate-y：垂直堆叠
.bk_image{
position: fixed;
height: 100px;
top: 0;
right: 0;
left: 0;
background-image: url("image/2.png");
background-repeat: repeat-y;
}
二、Background-position
定位和展示背景如图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk-position</title>
<style>
.bk_position{
height: 180px;
width: 20px;
border: 1px solid red;
background-image: url("image/18.png");
background-repeat: no-repeat
}
</style>
</head>
<body>
<div class="bk_position"></div>
</body>
</html>
如果有一张图片如下显示，如何只展示其中某一个图标呢
我们可以改变height的高度，先只显示一个图表，如下：
height: 20px;
那接下来需要展示心型图标的话，光改变div元素的位置是没有用的，因为元素位置变了，那这个图片也会随之改变，所以需要背景图片位置改变而元素位置不变。这可以通过backgr-position实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk-position</title>
<style>
.bk_position{
height: 20px;
width: 20px;
border: 1px solid red;
background-image: url("image/18.png");
background-repeat: no-repeat;
background-position-x: 0;
background-position-y: 0;
}
</style>
</head>
<body>
<div class="bk_position"></div>
</body>
</html>
x和y分别表示横轴和纵轴，（0,0）表示左上角。调整位置，就能展示心型了
三、Background简写
省略重复代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk-position</title>
<style>
.bk_position{
height: 20px;
width: 20px;
border: 1px solid red;
background: url("image/18.png") 0 -119px no-repeat;
}
</style>
</head>
<body>
<div class="bk_position"></div>
</body>
</html>
分别表示为：url地址、position的x和y、是否重复
四、事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
.input_text{
height: 20px;
width: 150px;
//border: 1px solid red;
}
.input_username{
height: 20px;
width: 150px;
}
.image_username{
display: inline-block;
height: 20px;
width: 15px;
background: url("image/icons.png") -308px 0px no-repeat;
}
</style>
</head>
<body>
<div class="input_text">
<span class="image_username"></span>
<input type="text" class="input_username" />
</div>
</body>
</html>
将人物图标移到输入框的右边
（1）两层叠加使用position的relative+absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style>
.input_text{
position: relative;
height: 20px;
width: 150px;
//border: 1px solid red;
}
.input_username{
height: 20px;
width: 150px;
}
.image_username{
position: absolute;
right: 1px;
top: 3px;
display: inline-block;
height: 20px;
width: 15px;
background: url("image/icons.png") -308px 0 no-repeat;
}
</style>
</head>
<body>
<div class="input_text">
<span class="image_username"></span>
<input type="text" class="input_username" />
</div>
</body>
</html>
看上去是完成要求了，但是输入的内容会覆盖图标
可以给input标签添加一个padding，这样可以让input输入的内容不会覆盖到图标
.input_username{
height: 20px;
width: 130px;
padding-right: 20px;
}
这样输入的内容就不会到图标那块
