菜单项的背景图片

Question

我正在这个网站上工作 edsys.in。最后一个菜单项锚点（教育内容）有一个带有文本 trending new 的背景 gif。当我应用以下 CSS 时，图像消失了：

  background-position-y: 20px;

设置锚点高度无效。

这是我现在的 CSS:

.trending a {
  background: url('http://www.edsys.in/wp-content/uploads/trending.gif') no-repeat bottom;
  background-position-x: 5px;
}

Answer 1

.trending a {
background: url('http://www.edsys.in/wp-content/uploads/trending.gif')no-repeat 5px bottom;
height:'';
width:'';
}

Answer 2

您的背景因溢出锚元素而被截断。简单地调整高度是行不通的，因为锚点是一个内联元素。首先尝试将锚点设置为 display: block;，例如：

.trending a {
  background: url('http://www.edsys.in/wp-content/uploads/trending.gif') no-repeat bottom;
  background-position-x: 5px;
  background-position-y: 20px;
  display: block;
  height: 100%;
}

菜单项的背景图片

Background image for menu item

css

wordpress

menu

background-image

menuitem