我在这里遇到了问题。我想把文字(链接)放在图像上。我知道这个位置:绝对,位置:相对和z指数,但不起作用:(
HTML:
<section id="container>
<div class="wrap">
<ul>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
<li><a href="#"><img src="img/hello.jpg" alt="">Text</a></li>
</ul>
</div>
</section>
CSS:
ul {
margin: 15px auto;
overflow: hidden;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
width: 95%;
text-align: center;
}
li {
display: inline-block;
width: 33%;
text-align: center;
background-color: #282828;
}
li:hover img {
opacity: 0.1;
}
img {
max-width: 100%;
display: block;
}
答案 0 :(得分:0)
试试这个
a { padding-bottom: 100%; }
答案 1 :(得分:0)
只需看下页的输出即可。
注意我只为一个li设置了内联样式。您可以将其添加到其他人
<li><a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnxWPtKJdW10x5Ar3eYP9zT44CCojcLQcnETwx-TaG9Pb6ttxSvRbX3H0" alt=""><span style="position:relative;bottom:30px;">Text</span></a></li>
答案 2 :(得分:0)
尝试使用html标记包装您的链接文本{>> {(3}}):
<ul>
<li><a href="#"><img src="img/hello.jpg" alt=""><span>Text</span></a></li>
</ul>
然后添加CSS:
a {
position: relative;
background-color: #282828;
padding: 10px;
display: block;
padding: 25px 10px;
}
img {
max-width: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
z-index:99;
}
a span {
position: absolute;
top: 0;
left: 0;
z-index:999;
}