Question

我正在制作导航列表，我想知道是否有一种方法可以使用CSS中的background属性在用户将鼠标悬停在链接的两侧时放置图像。这是我现在拥有的：

nav.vertical li a:hover {
  background: #D4CD00 url(wnaderknight.png) right/25px 25px no-repeat;
  color: black;
}

Answer 1

您可以使用多个背景或伪

.bg {
  display:inline-block;
  padding:30px;
  background:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) right/25px 25px no-repeat,url(http://www.icone-gif.com/icone/nature/terre/terre-32.png) left/25px 25px no-repeat
}
.psdo:before,
.psdo:after {
  vertical-align:middle;
  display:inline-block;
  content:url(http://www.icone-gif.com/icone/nature/terre/terre-32.png)
}

<a href="#" class="bg"> link with bg image on both sides </a> <br/>
<a href="#" class="psdo"> link with bg image on both sides </a>

是否可以在background属性中使用相同的图像两次？

1 个答案: