WordPress（标题/导航栏）上同一图像的不同背景位置以及如何使它们相同？
Posted
技术标签:
【中文标题】WordPress（标题/导航栏）上同一图像的不同背景位置以及如何使它们相同？【英文标题】：Different background positions of the same image on WordPress (header/nav bar) and how to make them same? 【发布时间】：2018-12-22 03:27:44 【问题描述】：我正在 WordPress 上开发 website 并遇到了一些问题。基本上，我的客户希望标题是这样的：
基本上，当将鼠标悬停在选项卡上时，特定选项卡下应显示一条蓝线。我通过css插入了一个图像来做到这一点，它工作正常。 但是，当我向下滚动时，主题会自动将标题的大小（高度）更改为：
现在，这使它变得丑陋，因为蓝线（我设置的图像）现在离单词太近了。这是我为图片设置的css代码：
.navbar-nav > li > a:hover
text-decoration: none;
background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
background-size: 65% 2px;
background-repeat: no-repeat;
background-position: 50% 62%;
padding-bottom: 0px;
这里的目标是使标题导航菜单的向下滚动版本的蓝色下划线间距与未滚动版本完全相同。我尝试延长向下滚动版本的容器，但无济于事，因为即使向下滚动版本的容器大小与主版本大致相同，蓝色下划线也不会移动，非常接近单词。所以总而言之，问题是同一图像的不同背景位置。我想让它们一样。非常感谢您的帮助 :)
我也尝试将其添加到 header.php：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script type = "text/javascript">
$("sticky-nav").hover(function ()
if ( $("sticky-nav").hasClass( "navigation sticky offset scrolling" ) )
$("sticky-nav").css("padding-bottom","7px");
else $("sticky-nav").css("padding-bottom", "0px");
);
</script>
这是我只是在尝试在向下滚动时类更改时增加填充。但不知何故，它不起作用。
【问题讨论】：
【参考方案1】：更好的解决方案是使用底部边框，它会根据锚元素的内边距进行自我调整。
.menu-item.active, .navbar-nav > li > a:hover
border-bottom: 3px solid #406d96;
【讨论】：
是的，我同意，不幸的是，它特别需要在单词下方只有一个空格，而不是在边框上:(【参考方案2】：好的解决了，我意识到我只需要在滚动时访问 .navigation.sticky 类，而不仅仅是 navbar-nav。所以我复制了我之前编写的整个 css 函数并更改了类和填充。总而言之，我现在在 WP 上的 Additional CSS 下有这 2 个：
.navbar-nav > li > a:hover
text-decoration: none;
background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
background-size: 65% 2px;
background-repeat: no-repeat;
background-position: 50% 62%;
padding-bottom: 0px;
.navigation.sticky .navbar-nav > li > a:hover //------>including the .sticky class
text-decoration: none;
background-image: url('https://cdn.pbrd.co/images/HtVu9bz.png');
background-size: 65% 2px;
background-repeat: no-repeat;
background-position: 50% 62%;
padding-bottom: 8px; // -------> Change the padding
【讨论】：
以上是关于WordPress（标题/导航栏）上同一图像的不同背景位置以及如何使它们相同？的主要内容，如果未能解决你的问题，请参考以下文章