有没有办法为列表中的每个列表项添加背景图像？

Question

我正在建立另一个网站，我有一个有趣的想法。背景是水彩画，我想让每个导航按钮后面都有一个水彩飞溅的图像。我一直在试图解决这个问题，但没有任何效果。 这是我当前的尝试，但我尝试过的任何方法都还没有奏效：

  <nav>
    <div class="nav-links">
    <ul>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
      <li><a href="">LORUM</a></li>
    </ul>
    </div>
</nav>

还有我的CSS：

    <style>
nav{
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: right;
}
.nav-links{
  flex: 1;
  text-align: right;
}
.nav-links ul{
  
}
.nav-links ul li a{
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.nav-links ul li{
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
  background-image: url(https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png);
  background-position: relative;
  
}
</style>

请帮忙！

Answer 1

尝试一下这个 CSS：

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: flex-end;
  align-items: center;
}

.nav-links {
  flex: 1;
  text-align: right;
}

.nav-links ul {
  padding: 0;
  margin: 0;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}

.nav-links ul li a {
  color: black;
  text-decoration: none;
  cursor: pointer;
  position: relative; /* Required for the pseudo-element */
  z-index: 1; /* Make sure the link text is on top */
}

/* Add a pseudo-element for the watercolor background */
.nav-links ul li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://assets.onecompiler.app/42tzva7s5/42wnuqh5j/water%20drop.png');
  background-size: contain; /* Adjust as needed */
  background-repeat: no-repeat;
  z-index: 0; /* Make sure this is behind the link text */
}