Question

不确定这是否可行，但我有一个带有“边框”背景的div。在这个div中是另一个包含内容的div，我希望这个div出现在边框下面。

这可能与CSS有关吗？

编辑：抱歉匆忙写下来，让我试着解释一下。

父div使用背景图像，如下所示：

background-image: url(images/SomeImage.png)

SomeImage.png只是一个出现在div顶部的自定义边框。

我在这个父div中有一个子div，我希望它出现在SomeImage.png下面。这可能吗？

Answer 1

做这样的事情：

<强> HTML

<div id="border-bg">
   <div id="content">
      Your content goes here
   </div>
</div>

<强> CSS

#border-bg {
    background:url(images/border.png) no-repeat;
    z-index:100;
    position:relative;
}
#border {
    z-index:10;
    position:relative;
}

确保添加边框图片的width和height。

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

Check this for more info about z-index

Answer 2

这是可能的。尝试更改父div的不透明度。例如 $（“＃childdiv”）。css（{opacity：1.0}）; $（“＃parentdiv”）。css（{opacity：0.75}）;

Answer 3

我想你想在内容div上应用内部阴影http://sublimeorange.com/css/css3-inner-shadow/？

<div id="border-frame" style="padding: 10px; background-color: red">
<div id="content" style="padding: 10px; box-shadow:inset 0 0 10px #000000; background-color:white"> 
this is some great text
</div>
</div>

http://jsfiddle.net/gzbVG/

Answer 4

我最终将“背景图片”放在另一个div中并使用负边距。很抱歉混淆但其他解决方案都没有对我有用。

Answer 5

把它扔出去...... 我正在使用它将背景图片放在登录屏幕后面......

 <table align=center width=100% border=0 cellpadding=0 cellspacing=0    background="images/image.png" STYLE="background-repeat: no-repeat; background-position:center">
 <tr>
 <td align=center valign=middle height="350" background="images/loginimage.png"  STYLE="background-repeat: no-repeat; background-position:center">

 Content Here

 </td>
 </tr>
 </table>

将div放在另一个div的背景下

5 个答案: