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;
}

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

Answer 2

方法论存在缺陷。你不能把放在里面div，同时期望它出现在div之后。你的div有一张背景图片，你放在里面的任何东西都会覆盖背景，周期。

你需要重新思考整个事情......他们自己div中的三个项目中的每个项目都在另一个div内用作容器。然后，您可以将图片div置于边框div后面（下方）。

编辑：

以下jsFiddle显示如何将三个div放入容器中，而后两个覆盖第一个容器。这两个div是透明的，可以模拟您的透明边框PNG，也可以让您看到后面的div。背后的红色div应该代表您的照片，并且设置为position: absolute和bottom: 0。

http://jsfiddle.net/sparky672/a9cX8/

获取图像显示在div下方/后方

2 个答案: