如何在没有背景位置属性的情况下定位背景图像

Question

在这个页面（blog.prco.com）的菜单中，我将背景图像放在元素的悬停位置，但对于元素的原点和背景位置的目标，点正在移动到最终位置。

问题是，如何在没有背景位置属性的情况下将图像居中放置在元素下方。我想要一个固定的图像。

请只使用css，我无法更改html，因为此网站位于wordpress 上

感谢

Answer 1

以下是带有:after选择器的解决方案：

Fiddle

ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
li {
  display: inline-block;
  margin: 0 15px;
}
li a {
  display: block;
  position: relative;
}
li a:after {
  content: '';
  display: block;
  opacity: 0;
  width: 6px;
  height: 5px;
  background: url(http://blog.prco.com/wp-content/themes/annina/images/dotCo.png) center bottom no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  transition: opacity .3s ease-in-out;
}
li a:hover:after {
  opacity: 1;
}

<ul id="menu-menu1" class="menu nav-menu">
  <li id="menu-item-60" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-60"><a href="http://blog.prco.com/blog/category/london/">LONDON</a>
  </li>
  <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-56"><a href="http://blog.prco.com/blog/category/paris/">PARIS</a>
  </li>
  <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-57"><a href="http://blog.prco.com/blog/category/munich/">MUNICH</a>
  </li>
  <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58"><a href="http://blog.prco.com/blog/category/moscow/">MOSCOW</a>
  </li>
  <li id="menu-item-59" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-59"><a href="http://blog.prco.com/blog/category/dubai/">DUBAI</a>
  </li>
  <li id="menu-item-61" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-61"><a href="http://blog.prco.com/blog/category/new-york/">NEW YORK</a>
  </li>
  <li id="menu-item-62" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-62"><a href="http://blog.prco.com/blog/category/milan/">MILAN</a>
  </li>
</ul>

Answer 2

如果您需要一个固定的图像，请使用"backgroundattachment"和atribute"fixed"。例如：

div {
  background-image: url("images/imagen_pequena.png");
  background-attachment: fixed;
}