html - 试图让标题链接在所有页面上都可见

Question

我在标题中添加了我的帐户链接和心愿单链接。它在主页上显示正常，但当我转到任何其他页面时，图像不再显示，我看到的只是 Alt 文本。

有人可以帮助我调整我的代码，以便在所有页面上正确显示相同的图像吗？ :-)

我试图做到这一点，使图片在悬停时改变颜色，方法是将一张图片放在另一张图片下方...

PHP:

<div id="myaccount">
    <a href="wordpress/my-account"><img class="bottom" src="wp-
content/themes/mt_theme/images/my_account_hover.png" alt="My 
Account"/> 
<img class="top" src="wp-content/themes/my_theme/images/my_account.png" alt="My Account"/>
        <p class="icotext">My Account</p>
    </a>
</div>
<div id="wishlist">
    <a href="wishlist"><img class="bottom2" src="wp-content/themes/smy_theme/images/wishlist_hover.ico" alt="Wishlist"/> 

心愿单

CSS:

#myaccount{
  position: relative;
  margin: 0 auto;
}
#myaccount img {
  position:absolute;
  left:900px;
  top: -20px;
  Height: 50px !important;
  width: 50px !important;
} 
a:hover img.top {
  opacity:0;
}
.icotext{
  position: absolute;
  left: 890px;
  top: 28px;
  color: #000000  
}
a:hover .icotext{
  font-weight: bold;
  left: 888px;
}
#wishlist{
  position: relative;
  margin: 0 auto;
}
#wishlist img {
  position:absolute;
  left:990px;
  top: -20px;
  Height: 50px !important;
  width: 50px !important;
}
.icotext2{
  position: absolute;
  left: 992px;
  top: 28px;
  color: #000000  
}
a:hover .icotext2{
  font-weight: bold;
  left: 990px;
}
a:hover img.top2 {
  opacity:0;
}
img.bottom2 {
  opacity:0;  
}
a:hover img.bottom2 {
  opacity:1;
}
img.bottom {
  opacity:0;
}
a:hover img.bottom {
   opacity:1;

Answer 1

我猜其他页面正在尝试从另一个文件夹中获取图像。

src="wp-content/themes/my_theme/images/my_account.png"

您正在使用解释为“{当前文件夹}/wp-content/...”的相对地址尝试使用

src="/wp-content/themes/my_theme/images/my_account.png"

前面的/将被解释为“{site_root}/wp-content/...”