答案

Question

我有一个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周围创建了一个边框。整个页面的背景为黑色。问题是，边框图像的一部分是隐藏的。隐藏在div的背景颜色。我尝试添加

div {z-index: -1;}

获取我的div 背后的 borderimage，但这不起作用。我该怎么做呢？感谢

Answer 1

如果您查找属性z-index，您会发现它只适用于定位的元素，因此您需要使用position:absolute，position:relative来定位div，或position:fixed。

Answer 2

边框设置为transparent。它与z-index

无关

将css设为：border: 50px solid;

像这样

body {
  color: #cca900;
  background-color: black;
  text-align: center;
}
#borderimg {
  background: black;
  color: #cca900;
  border: 50px solid;
  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;
}

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

Answer 3

答案

要使用您的解决方案清楚地回答您，您需要将position: absolute;添加到CSS属性中。

实施例

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

结论

我认为这样一切都将为你工作，因为z-index属性指定了定位元素的堆栈顺序，所以你需要，如我所说，position:relative属性，因为一个元素更大的堆栈顺序始终位于堆栈顺序较低的元素前面。

div背景/身体背景下的背景

3 个答案:

答案

实施例

结论