在 div 下隐藏图像 [英] Hiding a image under the div

问题描述

先看看这个屏幕截图:

那个白色的盒子在橙色背景上，我希望它在它的正下方，就像箭头所指的那样.其余的当然应该是可见的:它应该只是将其隐藏在橙色背景中.

这是橙色背景样式和白色框本身:

橙色背景:

body {边距:0；填充:0；背景: url("../img/back.png") repeat-x top #fff;文本对齐:左；颜色:#8a5225；}

白框:

#box {背景: url("../img/box.png") 不重复；宽度:163px；高度:41px；浮动:对；位置:相对；}

希望你给我一些解决方案.我一直在尝试使用 z-index 但它没有带来任何结果......

解决方案

根据您当前的 html 结构，您将无法执行此操作.Z-index 仅适用于定位元素.即 relative、absolute 或 fixed.您将无法将这些应用于 body 元素.你可以试试，但我试过了，没有用.而是将橙色背景放入另一个 div 并在其下方向上绘制较低的背景.

http://jsfiddle.net/5bsty/

第一个div
<div class="two">第二个div</div>div.one {背景:#c74d12；z-索引:3；位置:相对；}div.二{位置:相对；顶部:-10px；z-索引:1；背景:白色；}

Take a look at this screenshoot first:

That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.

Here is the orange background style and the white box itself:

Orange background:

body {
    margin: 0;
    padding: 0;
    background: url("../img/back.png") repeat-x top #fff;
    text-align: left;
    color: #8a5225;
}

White box:

#box {
    background: url("../img/box.png") no-repeat;
    width: 163px;
    height: 41px;
    float: right;
    position: relative;
}

Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...

解决方案

You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.

http://jsfiddle.net/5bsty/

<div class="one">First div</div>
<div class="two">Second div</div>​

div.one {
    background: #c74d12;
    z-index: 3;
    position: relative;
}

div.two {
    position: relative;
    top: -10px;
    z-index: 1;
    background: white;
}

这篇关于在 div 下隐藏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！