Ссылка на изображение

Question

Ссылка на изображение

0

У меня проблема. Я хочу поместить текст (ссылку) поверх изображения. Я знаю о позиции: абсолютный, положение: относительный и 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;
}

user3051266 30 нояб. 2013, в 06:27

Источник

Теги:

html

css

hyperlink

image

3 ответа

Ещё вопросы

CRABOLO · Answer 1 · 2013-11-30T03-42-00.000Z

Попробуй это

a { padding-bottom: 100%; }

Zword · Answer 2 · 2013-11-30T02-33-00.000Z

Просто просмотрите вывод на странице ниже.

Обратите внимание, что я установил встроенный стиль только для одного li.You можете добавить то же самое к другим

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>

Prasanth K C · Answer 3 · 2013-11-30T02-01-00.000Z

Попробуйте обернуть текст ссылки с помощью тега html, подобного этому (Fiddle Demo):

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

Это то, что происходит. dropbox.com/s/cxlh3ti1c6azto6/… Wired
@ user3051266: проверьте обновленную скрипку.