javascript - 获取一个 img 以显示在 div 下方/后面

Question

我有一个菜单按钮。主要的蓝色轮廓应该位于图像上方，但现在蓝色边框位于图像后面。

你能帮我弄清楚我需要做什么才能得到蓝色边框后面的图像吗？

我将蓝色边框切成两部分，顶部和底部。底部是一个高大的图像，因此对于高大的图像，边框可以变大/变大。

这就是按钮的外观:

这是它目前的样子:

我的代码:

<div class="buttonTop">
    <div class="buttonBottom">
        <img class="buttomImg" src="images/ButtonImages/sweets2.jpg" width="150px" height="105px" alt=""/>
    </div>
</div>

.buttonTop { 
    background: url(../images/dinnersButton.png) 0 top no-repeat; 
    padding-top: 73px; 
    display: block; 
    width: 153px; 
    height: 113px;
    margin: 0px auto; 
}

.buttonBottom { 
    background: url(../images/buttonBottomLite.png) 0 bottom no-repeat; 
    padding: 0px 2px 5px 2px; 
    display: block; 
    height: 109px;
    z-index: 2;
}

.buttomImg {
    z-index: 0;
}

Answer 1

<div class="round_border">
<img src="" alt="" />
</div>

--- CSS
.round_border {
padding: 5px;
border: 5px solid blue;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

这应该适用于大多数现代浏览器。