HTML CSS背景图居中（无序列表）
--背景重复：
backgroung-repeat:
--no-pepeat：不重复
--repeat-x：水平水平方向平铺;
--repeat-y：垂直方向平铺
--背景位置：
background-position(x,y):
--属性值分水平和垂直方向:
-- 水平方向: left/center/ight;
-- 垂直方向: top/center/bottom :
--background-position:right;表示图片右居中，两个属性当只设置一个时，另外一个默认为center
--背景大小设置: background-size
--按高度等比缩放: contain
--按宽度等比缩放: cover
完全按照容器大小进行100%缩放: background-size:100% 100%;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变背景
</title>
<style>
ul {
width: 260px;
list-styLe: none;
padding: 0 40px 0 0;
}
li {
width: 300px;
height: 40px;
border: 1px solid red;
background: url("imgurl");
background-repeat: no-repeat;
background-position: right;
}
</style>
</head>
<body>
<div>
<ul>
<li>第三年初
</li>
<li>夺萃比无无无无
</li>
<li>而纷纷发文
</li>
</ul>
</div>
</body>
</html>
背景图居中属性background-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变背景
</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid gold;
background-color: mediumpurple;
background-image: url("imgurl");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
