爲什麼背景顏色：白色;不起作用？

這裏是我的代碼：爲什麼背景顏色：白色;不起作用？

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

爲什麼背景顏色：白色;不起作用？

回答

相關問題