把链接放在菜单按钮

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的行为。真酷！我仍然是新手，但我完全理解所有这些解决方案！谢谢！