CSS文本替换为图像，需要超链接 [英] CSS text replace with image, need hyperlink

问题描述

我使用 text-indent 技术将我的< h1 /> 标记替换为我的网站图片如此：

 < h1 title =Homepage>我的标志< / h1> 
  

CSS：

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

唯一的问题是，我想仍然有新的图像作为超链接。我尝试过：

 < h1 title =Homepage>< a href =＃> ; / a>< / h1> 
  

但是由于它是缩进的，所以链接也是。我想知道是否有人对如何执行此操作有任何建议，并且仍然是有效的XHTML。

编辑一个可以被屏幕阅读器访问的方式，从我读的，执行显示：none 将不能与一些读者一起工作。

<有很多方法可以做到这一点，这是我喜欢的方式，它工作得很好，很容易实现。

 < div id =header> 
< h1>< a href =/title =首页>首页< / a>< / h1> 
< / div> 
  

然后我做这个css，这也被称为Leafy / Langridge图像替换 / p>

  #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 ，这应该等于你的image-height。

I am using the text-indent technique to replace my <h1/> tag with my website's image as so:

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

CSS:

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

The only problem is that I want to still have the new image act as a hyperlink. I tried doing:

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

But since it is being indented, the link is too. I wanted to know if anyone had any suggestions on how to do this and still be valid XHTML.

EDIT I'd rather do it in a way that is accessible to users with screen readers, from what I read, doing a display:none will not work with some readers.

解决方案

There are many ways to do this, this is the way that I prefer, it works well, and is easy to implement.

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

Then i do this css, this is also know as the "Leafy/Langridge image replacement" method

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

The only thing you should have to edit is the height, and the padding-top. In this example it is 22px, this should be equal to your image-height.

这篇关于CSS文本替换为图像，需要超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！