将图像发送回css中的背景颜色

Question

我有一个导航栏女巫有背景颜色。

现在我将图像加载到bar的每个元素。

现在我想将50％的图像发送到条形图上，50％的图像显示在条形图上方。

这怎么可能？ 请有人帮助我

但我想要这样的事情：

Answer 1

http://jsfiddle.net/tpjk1cLu/2/
使用相对定位和z-index，可以实现这一点 HTML：

<div class="bar">
    <a href="#">
        <img src="http://cdn2.hubspot.net/hub/385155/file-2329706823-png/Scanalytics-Smart-Home.png?t=1445265215183&width=65" />
    </a>
    <a href="#">
        <img src="http://www.convertcart.com/wp-content/uploads/2015/06/email-list-builder.jpg" />
    </a>
</div>

CSS：

.bar {
    z-index:105;
    background:#be4;
    margin-top:150px;
}
.bar a {
    position:relative;
    top:-60px;
}
.bar a img {
    z-index:-1;
    position:relative;
    top:0;
    transition:all .5s ease-in-out;
}
.bar a img:hover {
    top:-20px;
}

希望这有帮助！