一、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; ???????}这样输入的内容就不会到图标那块
CSS-background
原文地址：https://www.cnblogs.com/bigberg/p/9232866.html