Question

我在这里遇到了问题。我想把文字（链接）放在图像上。我知道这个位置：绝对，位置：相对和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;
}

Answer 1

试试这个

a { padding-bottom: 100%; }

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

尝试使用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;
}

链接图像

3 个答案: