嵌套划分标签不同背景

Question

我无法让第二个分区标签的背景图片显示在第一个分区标签的顶部。我假设嵌套这些会起作用，但我放置的第二个分区标签或 img 都没有显示。

这是我的代码。它应该放置一个 white/gray 图像在中间重复，图像在里面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<html>
<HEAD>
<style type="text/css">
body { background-image:url('http://lib.store.yahoo.net/lib/oberers-   
flowers/Background-2013.gif') ;
       background-repeat: no-repeat;
       background-color:black; overflow:none;}


.bgimg-paisley {
    background-image:url('http://lib.store.yahoo.net/lib/oberers-  
flowers/black-paisley-background.jpg');
    height:87%;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.bgimgborder {
    background-image:url('http://lib.store.yahoo.net/lib/oberers-  
flowers/runner-for-paisley-test.gif');
    background-repeat: repeat-y;
    width:720px;
    height:87%;
}

-->
</style>

</head>
<body>

<div class="bgimg-paisley"   
style="position:absolute;top:97px;left:0px;width:100%;>
     <div class="bgimgborder" style="position:absolute;top:97px;left:200px;>
    <img border="0" src="http://lib.store.yahoo.net/lib/oberers-
flowers/bride-and-bridesmaid.jpg"  width="700px">
     </div>
</div>

</body>
</html>

Answer 1

当重叠 html 元素时，注意您的相关标签的 z-index css 属性很有用。它本质上告诉浏览器应该在其他元素之上查看哪些元素。 z-index 越高，优先级越高。我用你的代码做了这个 fiddle 并将 img 标签 z-index 设置为 100，它就显示出来了。

Answer 2

您缺少样式属性的结束引号：

在您的代码段中：

style="position:absolute;top:97px;left:0px;width:100%;
style="position:absolute;top:97px;left:200px;

应该是：

style="position:absolute;top:97px;left:0px;width:100%;"
style="position:absolute;top:97px;left:200px;"

嵌套划分标签不同背景

nested division tags different background

html

css

background