我在这里有问题。我想在图像上放置文本(链接)。我知道position:absolute,position:relative和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;
}

最佳答案

尝试这个

a { padding-bottom: 100%; }

关于html - 图片链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20296643/

10-12 00:01
查看更多