CSS текст заменить на изображение, нужна гиперссылка

Question

Я использую технику text-indent, чтобы заменить тег <h1/> изображением моего веб-сайта следующим образом:

<h1 title="Homepage">My logo</h1>

CSS:

#header h1 {
    float: left;
    background: transparent url('../images/logo.png');
    width: 214px;
    height: 64px;
    text-indent: -9999px;
}

Единственная проблема заключается в том, что я хочу, чтобы новое изображение действовало как гиперссылка. Я пытался сделать:

<h1 title="Homepage"><a href="#">My logo</a></h1>

Но так как это отступ, ссылка тоже. Я хотел знать, есть ли у кого-нибудь какие-либо предложения о том, как это сделать, и при этом быть действительным XHTML.

РЕДАКТИРОВАТЬ Я бы предпочел сделать это так, чтобы это было доступно пользователям с программами чтения с экрана, из того, что я прочитал, выполнение display:none не будет работать с некоторыми читателями.

Answer 1

Есть много способов сделать это, я предпочитаю этот способ, он работает хорошо и его легко реализовать.

<div id="header">
    <h1><a href="/" title="Homepage">Homepage</a></h1>
</div>

Затем я делаю этот CSS, это также известен как метод «Замена изображения Лифриджа / Лэнгриджа».

#header h1 a {
    display: block;
    padding: 22px 0 0 0;
    overflow: hidden;
    background-image: url(../images/sidebar/heading.png);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:22px;
}

Единственное, что вам нужно отредактировать, это height и padding-top. В этом примере это 22px, это должно быть равно вашей высоте изображения.

Answer 2

Почему вы дурачитесь с отрицательными отступами - просто используйте атрибут alt тега img?

<h1 title="Homepage><a href="#"><img src="images/logo.png" alt="My logo"/></a></h1>

Answer 3

@ Партрик Хагне: Вы не должны использовать display:none, потому что некоторые программы чтения с экрана будут игнорировать это ...

Вы можете увидеть список Девяти методов для замены изображения CSS на http://css -tricks.com , в котором описаны плюсы и минусы для каждого решения.

Answer 4

Что вы можете сделать, это удалить отступ. И используйте прятку, чтобы скрыть вместо:

<h1 title="Homepage"><a href="#"><span>My logo</span></a></h1>

#header h1 span
{
  display: none;
}

Возможно, вам придется установить ширину и высоту тега A, поскольку с помощью этого трюка ничего не получается.