Question

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

问题是，如何在没有background-position属性的元素下居中图像。我想要一个固定的图像。

请只有css，我无法更改html，因为这个网站是在wordpress上的

谢谢

Answer 1

如果您需要固定图像，请使用“background-attachment”，其属性为“fixed”。例如：

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

Answer 2

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

Fiddle

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: