<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<link rel="icon" type="image/x-icon" href="static/images/php.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
/*背景控制*/
/*background(背景图 背景色)*/
/*背景色（三种设置方法：1英文单词 2 16进制颜色 3 RGB颜色值）*/
body{
/*英文单词 background-color: red;*/
/* 十六进制颜色background: #c97474;
/*RGB颜色background: rgb(129,44,44);*/
/*背景色透明度*/
/*background-color: rgba(129,44,44,0.2);/*透明度范围0-1 设置透明度为rgba 多个a*/
/*background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552579296799&di=4c231ae1222a77fc4552f24847b98400&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b491568643df6ac7251bb68d30aa.jpg%401280w_1l_2o_100sh.jpg) no-repeat; /*图片不平铺*/
/*background-size: 100 背景图会有丢帧效果，不建议经常用%*/
}
/*背景色的线性渐变：
background:linear-gradient(方向，起始颜色，终止颜色)
/*hr{height: 10px;background: linear-gradient(to right,red,blue)}*/
hr{height: 10px;background: linear-gradient(to right,red,blue)}
/*背景图*/
/* background-imge:ur(图片地址)*/
/*精灵图 background-position:背景图片定位x y 坐标*/
div{
width: 80px;
height: 80px;
}
.pic1{background-image: url(static/images/p2.jpg) -100px 0 ;}
.pic2{background-image: url(static/images/p2.jpg) -310px 360px;}
P{
width: 20px;
height: 20px;
background: url(static/images/p1.jpg)-10px -360px;
}
</style>
</head>
<body>
<hr>
<div class="pic1"></div>
<div class="pic2"></div>
</body>
</html>
