链接图像

时间:2013-11-30 04:46:54

标签: html css image hyperlink

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

3 个答案:

答案 0 :(得分:0)

试试这个

a { padding-bottom: 100%; }

答案 1 :(得分:0)

只需看下页的输出即可。

注意我只为一个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>

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