添加图像CSS面包屑

-1

我想用这些漂亮的面包屑jsfiddle.net/orihadar/bugvgbf5/但我需要添加的每个上面的文字图像，所以每个李将包括该图像下的图像和文字（包括水平居中）。任何试图这样做都会破坏这些面包屑的美丽外观。任何想法我该怎么做？添加图像CSS面包屑

以下是CSS：

ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#breadcrumbs-two{ 
    overflow: hidden; 
    width: 100%; 
} 

#breadcrumbs-two li{ 
    float: left; 
    margin: 0 .5em 0 1em; 
} 

#breadcrumbs-two a{ 
    background: #ddd; 
    padding: .5em 1em; 
    float: left; 
    text-decoration: none; 
    color: #444; 
    text-shadow: 0 1px 0 rgba(255,255,255,.5); 
    position: relative; 
} 

#breadcrumbs-two a:hover{ 
    background: #99db76; 
} 

#breadcrumbs-two a::before{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-width: 1.5em 0 1.5em 1em; 
    border-style: solid; 
    border-color: #ddd #ddd #ddd transparent; 
    left: -1em; 
} 

#breadcrumbs-two a:hover::before{ 
    border-color: #99db76 #99db76 #99db76 transparent; 
} 

#breadcrumbs-two a::after{ 
    content: ""; 
    position: absolute; 
    top: 50%; 
    margin-top: -1.5em; 
    border-top: 1.5em solid transparent; 
    border-bottom: 1.5em solid transparent; 
    border-left: 1em solid #ddd; 
    right: -1em; 
} 

#breadcrumbs-two a:hover::after{ 
    border-left-color: #99db76; 
} 

#breadcrumbs-two .current, 
#breadcrumbs-two .current:hover{ 
    font-weight: bold; 
    background: none; 
} 

#breadcrumbs-two .current::after, 
#breadcrumbs-two .current::before{ 
    content: normal; 
}

来源

2015-01-15 user2299401

？ http://jsfiddle.net/bugvgbf5/3/ – innovation

它会帮助，如果你可以添加你想要实现的图片或至少在你的面包屑痕迹图像的宽度/高度 – crazymatt

我没有足够的信誉来上传图片。创新你明白我的意思只是图标应该在文本上方，而不是在左侧。图像应该是35X35像。谢谢。 – user2299401

像这样的事情？

你需要更清楚你想要在这里实现什么。

http://jsfiddle.net/bugvgbf5/4/

<ul id="breadcrumbs-two"> 


<li> 
    <a> 
    <img src="https://www.gravatar.com/avatar/0dadd597898bbd33e37fe684fa07aa2d?s=24&d=identicon&r=PG"/> 

     <br/> 
    bkbgbhighb 
    </a> 
</li>

你想要做这样

来源

2015-01-15 23:01:01 blairmeister

添加图像CSS面包屑

回答

相关问题