字體是不是在CSS圖像的頂部/ HTML

這是HTML代碼：字體是不是在CSS圖像的頂部/ HTML

<body> 
<div id="container"> 
    <img src="images/coffeebackground1.jpg" alt=""> 

<div id="topnav"> 
    <ul> 
     <li>Home</li> 
    </ul> 
</div> 
</div> 
</body>

這是我的CSS代碼：

* { 
    margin: 0; 
    padding: 0; 
} 

#container { 
    width: 100%; 
    height: 704px; 
    overflow: hidden; 
    background: white; 
    opacity: 0.7; 
    z-index:100; 
    position: relative; 
} 

#topnav { 
    width: 100px; 
    height: 20px; 
    background-color: red; 
    z-index:1000; 
    position: relative; 
    color: red; 
}

我所做的是我把一個圖像作爲背景，我想把topnav div放在背景圖片上。但是，好像我的代碼不工作。

來源

2016-08-13 Nicholas Ma

更改'background-color：red;'#topnav ... B ackground和font color都是一樣的，這就是爲什麼它沒有出現。 – Sankar

好的。我已將背景顏色更改爲綠色，但沒有任何顯示。 –

查看我的回答 – Sankar

背景和字體顏色是一樣的，這就是爲什麼它沒有出現

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#container { 
 
    width: 100%; 
 
    height: 704px; 
 
    overflow: hidden; 
 
    background: white; 
 
    opacity: 0.7; 
 
    z-index: 100; 
 
    position: relative; 
 
} 
 
#container img{ 
 
    top:20px; 
 
    position: relative; 
 
    } 
 
#topnav { 
 
    width: 100px; 
 
    height: 20px; 
 
    background-color: white; 
 
    z-index: 1000; 
 
    position: absolute; 
 
    color: red; 
 
    top:0; 
 
}

<body> 
 
    <div id="container"> 
 
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> 
 
    <div id="topnav"> 
 
     <ul> 
 
     <li>Home</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-08-13 12:43:53 Sankar

如何編輯代碼以使'Home'這個詞可以位於Google圖片的頂部？ –

@NicholasMa更新...現在檢查 – Sankar

，因爲無論是背景色和前景色設置爲紅色的文字是不可見的，所以元素只是顯示爲紅色塊。

此外，文本不會出現在圖像上方，因爲它定位爲relative，這意味着它將根據佈局相對於其自然位置進行定位。由於你沒有在CSS中指定偏移量，它實際上只是出現在它正常的位置，這正好在圖像的下面。

如果您將位置更改爲absolute，那麼它的位置將相對於#container而不是我認爲在這種情況下更有意義。從#container

#topnav { 
    background-color: white; 
    z-index:1000; 
    position: absolute; 
    left: 100px; 
    top: 20px; 
    color: red; 
}

來源

2016-08-13 12:52:58

omg非常感謝你！ –

沒問題！如果您認爲這是最佳答案，請點擊分數下方的勾號標記以獲得聲譽☺ –

刪除位置relative和#topnav設置位置absolute：然後您可以移動它是圖像上方設置的位置，像這樣。

或

上#container在CSS那樣取下#containerimg標籤並設置背景圖像：

background: url("images/coffeebackground1.jpg"); 

background-repeat: no-repeat; //if you don't want to repeat image 

background-size: auto; //try others parameters to fit your background

來源

2016-08-13 13:09:20

*{ 
    margin:auto; 
} 
#container { 
    width: 100%; 
    height: 704px; 
    overflow: hidden; 
    background: white; 
    z-index:100; 
    top:20px; 
    position: relative; 
} 

#topnav { 
    z-index:1000; 
    position: absolute; 
    left: 10px; 
    top: 10px; 
    color: #FFF; 
    font-family:arial; 
    font-size:30px; 
}If you want to change position of 'Home' please change #topnav:{ left: 70px}. If you want to increase more please left: 80px.. and so on. If you want to decrease please less #topnav{ left:30px.. and so on.}

來源

2016-08-13 13:58:55

如果您想更改'主頁'的位置，請更改#topnav：{left：70px}。如果你想增加更多請留下：80px ..等等。如果你想減少#topnav {left：30px ..等等。} –

請使用[編輯]鏈接將你的評論添加到你的答案的body_。沒有任何解釋的答案不是很有用，並且可能會在很少的原因下隨時刪除評論。 –

字體是不是在CSS圖像的頂部/ HTML

回答

相關問題