Html 主体背景后面/下面的div背景_Html_Css

Html 主体背景后面/下面的div背景

html css

Html 主体背景后面/下面的div背景,html,css,Html,Css,我有一个如下所示的HTML页面： <head> <style> body { color: #cca900; background-color: black; text-align: center; } #borderimg { background: black; color: #cca900;

我有一个如下所示的HTML页面：

<head>
    <style>
        body {
            color: #cca900;
            background-color: black;
            text-align: center;
        }
        #borderimg {
            background: black;
            color: #cca900;
            border: 50px solid transparent;
            padding: 0px;
            -webkit-border-image: url(img/rsz_gold_frame.jpg) 30 round;
            -o-border-image: url(img/rsz_gold_frame.jpg) 30 round;
            /* Opera 11-12.1 */
            border-image: url(img/rsz_gold_frame.jpg) 30 round;
        }
        div {
            border: 50px;
            padding: 22em;
        }
    </style>
</head>

<body id="borderimg">
    <div id="main"></div>
</body>

在边框图像后面获取我的div的背景，但这不起作用。我该怎么做？

谢谢

如果您查找该属性，您会发现它将只应用于已定位的元素，因此您将希望使用

位置：绝对

，

位置：相对

，或

位置：固定

将边框设置为透明。它与

z-index

将css设置为：

边框：50px实心
像这样

正文{
颜色：#cca900；
背景色：黑色；
文本对齐：居中；
}
#边界{
背景：黑色；
颜色：#cca900；
边界：50px固体；
填充：0px；
-webkit边框图片：url（img/rsz_gold_frame.jpg）30圈；
-o-border-image:url（img/rsz_gold_frame.jpg）30圈；
/*歌剧11-12.1*/
边框图片：url（img/rsz_gold_frame.jpg）30圈；
}
div{
边界：50px；
填充：22em；
}

答案
为了清楚地回答您的问题，您需要添加position:absolute到您的CSS属性
例子

身体{
颜色：#cca900；
背景色：黑色；
文本对齐：居中；
}
#边界{
背景：黑色；
颜色：#cca900；
边框：50px实心透明；
填充：0px；
-webkit边框图片：url（img/rsz_gold_frame.jpg）30圈；
-o-border-image:url（img/rsz_gold_frame.jpg）30圈；
/*歌剧11-12.1*/
边框图片：url（img/rsz_gold_frame.jpg）30圈；
}
div{
位置：绝对位置；
边界：50px；
填充：22em；
z指数：-1；
}

结论
我认为这样一切都会对您有效，因为z-index属性指定了定位元素的堆栈顺序，所以您需要，如我所说，position:relative
property，因为具有较高堆栈顺序的元素总是位于具有较低堆栈顺序的元素之前。
您能否提供一个小提琴，使身体的z索引为0，而div的z索引小于身体的z索引div{position:relative；z索引：-1；}
它必须与位置一起工作。您的div没有指定任何背景颜色，不确定应该或不应该遮挡什么。这个问题我不清楚。您希望实现什么？仅供将来参考，不建议链接到w3schools并这样做。谢谢，我一定会记住这一点。这是搜索中出现的第一件事，我通常只将它们用作某些属性的参考，因为这是最快的答案。很高兴剩下的信息能有所帮助
div {z-index: -1;}

<head>
    <style>
        body {
            color: #cca900;
            background-color: black;
            text-align: center;
        }
        #borderimg {
            background: black;
            color: #cca900;
            border: 50px solid transparent;
            padding: 0px;
            -webkit-border-image: url(img/rsz_gold_frame.jpg) 30 round;
            -o-border-image: url(img/rsz_gold_frame.jpg) 30 round;
            /* Opera 11-12.1 */
            border-image: url(img/rsz_gold_frame.jpg) 30 round;
        }
        div {
            position:absolute;
            border: 50px;
            padding: 22em;
            z-index: -1;
        }
    </style>
</head>

<body id="borderimg">
    <div id="main"></div>
</body>