将背景图像转换为对象问题

Question

我不知道如何将此背景转换为对象并将其放入我的菜单按钮中，因为文本和图像重叠。 我需要帮助将背景图像（小 png）转换为一个对象，以便文本“Lorem ipsum dolor sit amet，consectetur adipisci elit”无法覆盖它 不知道你懂没，我英文不太好，非常感谢

.menu22 {
  padding-left: 0;
  list-style: none;
  width: 300px;
  margin: 0 auto;

}

.menu22 li {
  background-image: url("https://i.ibb.co/SyCRm7z/1.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  position: relative;

}

.menu22 li:hover {
  	color: #404040 !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	background-image: url("https://i.ibb.co/SyCRm7z/1.png");
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	transition: all 0.3s ease 0s;
}

.menu22 a{
  display: block;
  padding: 23px 0;
  color: grey;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
}

<ul class="menu22">
			<li><a href="#">object1</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">object3</a></li>
			<li><a href="#">Lorem ipsum dolor sit </a></li>
			<li><a href="#">object5</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li><br>
</ul>

Answer 1

为锚标签添加了一些填充：padding-left:15%;

.menu22 {
  padding-left: 0;
  list-style: none;
  width: 300px;
  margin: 0 auto;

}

.menu22 li {
  background-image: url("https://i.ibb.co/SyCRm7z/1.png");
  background-repeat: no-repeat;
  background-position: 15px center;
  position: relative;

}

.menu22 li:hover {
  	color: #404040 !important;
	font-weight: 700 !important;
	letter-spacing: 1px;
	background-image: url("https://i.ibb.co/SyCRm7z/1.png");
	-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
	transition: all 0.3s ease 0s;
    padding-left:6%;
}
  .menu22 a{
  display: block;
  padding: 23px 0;
  color: grey;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  padding-left:15%;
}

<ul class="menu22">
			<li><a href="#">object1</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li>
			<li><a href="#">object3</a></li>
			<li><a href="#">Lorem ipsum dolor sit </a></li>
			<li><a href="#">object5</a></li>
			<li><a href="#">Lorem ipsum dolor sit amet</a></li><br>
</ul>

Answer 2

在li标签内再添加一个div标签，使背景css图片在div内，而不是li标签本身的背景。