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

Question

我不知道如何将此背景转换为对象并将其放入菜单的按钮中，因为文本和图像重叠。我需要帮助将背景图像（小 png）转换为一个对象，以便文本“Lorem ipsum dolor sat 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 {&nbsp; padding-left: 0;&nbsp; list-style: none;&nbsp; width: 300px;&nbsp; margin: 0 auto;}.menu22 li {&nbsp; background-image: url("https://i.ibb.co/SyCRm7z/1.png");&nbsp; background-repeat: no-repeat;&nbsp; background-position: 15px center;&nbsp; position: relative;}.menu22 li:hover {&nbsp; 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;&nbsp; &nbsp; padding-left:6%;}&nbsp; .menu22 a{&nbsp; display: block;&nbsp; padding: 23px 0;&nbsp; color: grey;&nbsp; font-size: 18px;&nbsp; text-decoration: none;&nbsp; text-align: center;&nbsp; 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标签本身的背景。