图片上的链接

Question

我这里有个问题。我想在图像上放置文本（链接）。我知道位置：绝对，位置：相对和 z-index，但不起作用:(

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;
}

Answer 1

尝试像这样 (Fiddle Demo)：用 html 标记包装您的链接文本：

 <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;
}

Answer 2

请看下页的输出。

注意我只为一个li设置了内联样式。你可以将相同的添加到其他人

http://jsfiddle.net/P2Uy9/

   <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>

Answer 3

试试这个

a { padding-bottom: 100%; }