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

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 {

  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标签本身的背景。