設置圖像在頁面頂部

我想在我的菜單列表上面設置以下image。設置圖像在頁面頂部

我可以使用<header>標籤來達到這個目的嗎 - 如果我可以那麼怎麼樣？

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-04-24 Zunaira Zafar

「上面」在哪些方面？你能創建一個你想要的圖像嗎？ – mplungjan

https://www.youtube.com/watch?v=9aXMBjKxGvk，然後將該圖像放在你的'ul'上面。 –

可能的重複[如何添加背景圖片到我的標題？]（http://stackoverflow.com/questions/27349112/how-do-i-add-a-background-image-to-my-header） –

你可以在頭標記使用它時，您可以在下面

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<header> 
 
    <img src="https://www.sololearn.com/Uploads/html-css.jpg " alt="" /> 
 
</header> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-04-24 12:51:44

不知道你想達到什麼，但是從更新的代碼你問題我明白你想要圖像在菜單上方。所以它是：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<img src="https://www.sololearn.com/Uploads/html-css.jpg"> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-04-24 12:51:58

幾乎是這樣。但這看起來不太好。我想將img放在與本網站所說的「世界上最大的網站開發者網站」相同的位置。如果要在上面的菜單中顯示圖片，請點擊此處。 –

你可以試試這個。我添加了一個類（.img-header）以使圖像響應。如果你願意，你可以刪除這個類。

我也加了<header>標籤，因爲你在你的問題中提到它，但它不是強制性的。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
} 
 

 
.img-header { 
 
    width: 100%; 
 
    height: auto; 
 
}

<header> 
 
    <img class="img-header" src="https://www.sololearn.com/Uploads/html-css.jpg" /> 
 
    <ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
    </ul> 
 
</header>

來源

2017-04-24 12:54:29

只需將導航欄上方的標籤。使用這實際上可以高達屏幕寬度縮放良好的品質形象..

header > img{ 
 
width:100%; 
 
height:auto; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<header><img src="https://www.sololearn.com/Uploads/html-css.jpg " alt="" /></header> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-04-24 12:55:47

請看看這個，這將是有益的給你。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<header> 
 
<center><img src="https://www.sololearn.com/Uploads/html-css.jpg" /></center> 
 
<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 
</header>

來源

2017-04-24 12:56:10

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-image: url(https://www.sololearn.com/Uploads/html-css.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    background-color: white; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

檢查上面的代碼中，一旦..

來源

2017-04-24 13:12:08

我正在嘗試做其他的事情，但這個想法遠不止於此。 –

很高興知道。 – 2017-04-24 13:20:32

你可以使用背景大小和填充頂，以保持圖像比例，如果它只是關於設計。

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background: url(https://www.sololearn.com/Uploads/html-css.jpg) 0 0 no-repeat; 
 
    background-color: #333333; 
 
    background-size: 100% auto; 
 
    
 
    /* eventually */ 
 
    max-width: 800px;/* any sized wished*/ 
 
    margin: auto; 
 
} 
 

 
ul:before { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 48%;/* 325/675 gives average ratio */ 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111111; 
 
} 
 

 
html {background:#74CDD3}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2017-04-24 13:33:08

設置圖像在頁面頂部

回答

相關問題