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;/* border: 1px solid red; */}li {width: 300px;height: 40px;border: 1px solid red;background: url("imgurl");background-repeat: no-repeat;background-position: right;}/* --背景重复：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%;*/</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>
