如何用图片替换主页链接锚文本

时间：2020-04-26 作者：DaF-Student

我正在尝试用面包屑预告片的图像替换主页链接文本。鼠标光标仍然是指针，但图像不会显示。我正在使用this breadcrumb trailer

我怎么能让它工作呢jsfiddle

<li itemprop="itemListElement" itemscope itemtype="" class="trail-item trail-begin">
<a href="#" rel="home" itemprop="item"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1" />
</li>
CSS：

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
}

1 个回复
最合适的回答,由SO网友:simongcc 整理而成

你的问题更像是一个CSS问题。默认情况下，定位点a显示为内联。所以它没有高度和宽度，除非里面有有限尺寸的文本、图像等。要使其工作，只需添加display:block; 以使其扩展以匹配父容器。

li.trail-begin {
    display: inline-block;
     font-size: 0;
     color: 000;
    height: 25px;
    position: static;
    text-align: center;
    width: 30px;
    line-height: 25px;
    margin: 0;
}
li.trail-begin a  {
    background-image: url("https://1.bp.blogspot.com/-T3iC1fWjXIM/XqVHr8gv4GI/AAAAAAAAAGE/k5EviLmoDwkttKB9sUgjVbCSTlinrOqlACLcBGAsYHQ/s1600/1-2-home-png-image-thumb.png");
    background-position:left;
    background-repeat:no-repeat;
    background-size: 25px;
    display: block; /* <-------- */
}

标签： navigation   breadcrumb   小码农  

相关推荐

Display Menu Navigation Label

如何获得菜单中应有的导航标签我正在使用这个代码 <?php $locations = get_registered_nav_menus(); $menus = wp_get_nav_menus(); $menu_locations = get_nav_menu_locations(); $location_id = \'footer_menu1\'; if (isset($menu_loc