为什么背景颜色：白色;不起作用？

这里是我的代码：为什么背景颜色：白色;不起作用？

body{ 
 
    text-align: center; 
 
} 
 

 
span{ 
 
    background-color: white; 
 
    z-index: 2; 
 
} 
 

 
div{ 
 
    border-top: 1px solid; 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -8px; 
 
    z-index: 1; 
 
}

<span>test</span> 
 
<div></div>

正如你看到的，黑线仍然是上的文字。虽然我已经为文字设置了白色背景颜色。为什么它没有出现？

我想在文字的边缘切割黑线。换句话说，该行应该围绕文本。

来源

2017-04-09 Martin AJ

的span需要的位置，即position: relative为z-index工作

body{ 
 
    text-align: center; 
 
} 
 

 
span{ 
 
    position: relative; 
 
    background-color: white; 
 
    z-index: 2; 
 
} 
 

 
div{ 
 
    border-top: 1px solid; 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -8px; 
 
    z-index: 1; 
 
}

<span>test</span> 
 
<div></div>

来源

2017-04-09 09:34:18 LGSon

-1

哪里是你的身体标记？

body{ 
 
    text-align: center; 
 
} 
 

 
span{ 
 
    background-color: red; 
 
    z-index: 2; 
 
} 
 

 
div{ 
 
    border-top: 1px solid; 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -8px; 
 
    z-index: 1; 
 
}

<body> 
 
    <span>test</span> 
 
    <div></div> 
 
</body>

来源

2017-04-09 09:37:04

的标签'html'，'head'和'body'为片段添加自动的，无需添加明确的，但是，这如何回答这个问题？ ... _black line_仍然位于文本的顶部 – LGSon

有人注意到Run code代码片段位于代码块内部吗？为什么？ –

嘿人看到代码片段中的身体，看到背景颜色是包装内容的跨度。你知道它的答案吗？ –

添加position:relative的跨度。

body{ 
 
    text-align: center; 
 
} 
 

 
span{ 
 
    position:relative; 
 
    background-color: white; 
 
    z-index: 2; 
 
} 
 

 
div{ 
 
    border-top: 1px solid; 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -8px; 
 
    z-index: 1; 
 
}

<span>test</span> 
 
<div></div>

来源

2017-04-09 09:41:50 Pratyush

该解决方案已经提供了10分钟。以前......那为什么还有一个呢？ ...并且一个好的答案也应该有一个解释_如何工作 – LGSon

为什么背景颜色：白色;不起作用？

回答

相关问题