把鏈接放在菜單按鈕

Question

我試圖創建一個菜單中的六個按鈕，放在一個大的背景圖像。如何讓鏈接文本留在按鈕中？這是到目前爲止的代碼（我想用這個「列表法」來保持，因爲我發現它更容易比多DIV-語句理解兩幅圖像中...）：

ul 
 
{ 
 
    padding:0px; 
 
    margin:0px; 
 
    width:510px; 
 
    float:left; 
 
    list-style:none; 
 
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg); 
 
    z-index:150; 
 
} 
 

 
ul li 
 
{ 
 
    width:50px; 
 
    height:100px; 
 
    padding:20px; 
 
    float: left; 
 
    display:inline-block; 
 
    z-index:100; 
 
}

<ul> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK1</li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK2</li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK3</li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK4</li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" />LINK5</li> 
 
</ul>

Answer 1

您需要將您的文字鏈接包裝在錨點中，因爲我想您無論如何都需要讓它們可點擊，然後使用負邊距「移動它們」。事情是這樣的：

ul 
 
{ 
 
    padding:0px; 
 
    margin:0px; 
 
    width:510px; 
 
    float:left; 
 
    list-style:none; 
 
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg); 
 
    z-index:150; 
 
} 
 

 
ul li 
 
{ 
 
    width:50px; 
 
    height:100px; 
 
    padding:20px; 
 
    float: left; 
 
    display:inline-block; 
 
    z-index:100; 
 
} 
 

 
ul li a { 
 
    display: block; 
 
    margin-top: -64px; 
 
}

<ul> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK1</a></li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK2</a></li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK3</a></li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK4</a></li> 
 
    <li><img src="http://via.placeholder.com/350x150" width="50" height="100" /><a>LINK5</a></li> 
 
</ul>

Answer 2

HTML

<ul> 
    <li>LINK1</li> 
    <li>LINK2</li> 
    <li>LINK3</li> 
    <li>LINK4</li> 
</ul> 

CSS

ul 
{ 
    padding:0px; 
    margin:0px; 
    width:510px; 
    float:left; 
    list-style:none; 
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg); 
    z-index:150; 
} 

ul li 
{ 
    background-image: url(http://via.placeholder.com/350x150); 
    background-size: 100% 100%; 
    width:50px; 
    height:100px; 
    padding:20px; 
    margin: 10px; 
    float: left; 
    display:inline-block; 
    z-index:100; 
} 

的jsfiddle：https://jsfiddle.net/d3Lw4hjq/

Answer 3

您可以absolute LY在li定位img，並在li到margin改變padding，然後使用display: inline-flex; justify-content: center; align-items: center;在img

ul 
 
{ 
 
    padding:0px; 
 
    margin:0px; 
 
    width:510px; 
 
    float:left; 
 
    list-style:none; 
 
    background-image: url(http://www.returngis.net/wp-content/uploads/pics/demos/grass.jpg); 
 
    z-index:150; 
 
} 
 

 
ul li 
 
{ 
 
    width:50px; 
 
    height:100px; 
 
    margin:20px; 
 
    z-index:100; 
 
    position: relative; 
 
    float: left; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
ul li img { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    z-index: -1; 
 
}

<ul> 
 
    <li><img src="http://via.placeholder.com/350x150"/>LINK1</li> 
 
    <li><img src="http://via.placeholder.com/350x150"/>LINK2</li> 
 
    <li><img src="http://via.placeholder.com/350x150"/>LINK3</li> 
 
    <li><img src="http://via.placeholder.com/350x150"/>LINK4</li> 
 
    <li><img src="http://via.placeholder.com/350x150"/>LINK5</li> 
 
</ul>

Answer 4

的定位文本你要麼設置的圖像作爲李的背景，像這樣：

<ul> 
    <li>LINK1</li> 
    <li>LINK2</li> 
    <li>LINK3</li> 
    <li>LINK4</li> 
    <li>LINK5</li> 
</ul> 

而對於CSS：

li { background-image: url('http://via.placeholder.com/350x150'); } 

或者你絕對位置的圖像，像這樣：

ul li 
{ 
    position: relative; 
} 

ul li img { 
    position: absolute; 
    z-index: -1; 
} 

小提琴這裏：https://jsfiddle.net/v78501mn/

只是一個小紙條，如果您有「顯示： inline-block「在你的li上，」float：left「是沒有必要的。

Answer 5

哦！我只是沒有意識到你可以通過添加額外的css代碼來自定義img-tag的行爲。真酷！我仍然是新手，但我完全理解所有這些解決方案！謝謝！