如何在 CSS 中向上移动背景图像，同时不移动文本？答案

【问题标题】：How can I move the background image up in CSS, while not moving the text along with it?如何在 CSS 中向上移动背景图像，同时不移动文本？
【发布时间】：2012-12-30 20:08:07
【问题描述】：

我在 CSS 中导航的活动状态遇到问题。我希望有一个与容器对齐的箭头，指向活动链接，但除非我将文本与背景图像一起向上移动，否则它不会对齐。箭头需要从文本偏移。对于任何反馈，我们都表示感谢！谢谢！

#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
#mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a
{
  background: url(http://www.jamiestarcevich.com/wp-content/uploads/2012/12/triangle.png);
  background-repeat: no-repeat;
  background-position:center top;
}

【问题讨论】：

能否添加一些 HTML 代码？否则我们都会猜测解决方案是什么。

标签： css header navigation background-image

【解决方案1】：

您可以使用像素或百分比，而不是一般的center,top，将箭头准确定位在您想要的位置

如果您需要箭头空间，请使用 padding-left（如果 RTL，则使用 padding-right）

旁注：查看您的代码，您可能需要考虑使用 CSS 扩展，例如 LESS，它支持嵌套规则，因此您不必一次又一次地重复元素

【讨论】：