CSS文字与图片更换，需要超级链接

我使用text-indent技术与我的网站的形象来代替我的<h1/>标签像这样：CSS文字与图片更换，需要超级链接

<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不会与一些读者工作。

来源

2009-01-29 roflwaffle

有很多方法可以做到这一点，这是我喜欢的方式，它的效果很好，并且很容易实现。

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

那么我这样做的CSS，这也被称为了“绿叶/ Langridge图片替换”方法

#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，这应该等于你的图像高度。

来源

2009-01-29 08:18:20 espenhogbakk

-1

你可以做的是取消缩进。并使用跨度隐藏代替：

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

#header h1 span 
{ 
    display: none; 
}

您可能因为没有使用罢了这一招设置A-标签也的宽度和高度。

来源

2009-01-29 07:49:49

嗯..为什么的这个否决？ – andyk 2009-01-29 08:23:05

是的，我真的无法看到这个投票背后的原因。 – 2009-01-29 09:43:05

我把它投下来是因为它不是最好的方式，对于初学者来说它使用额外的标记，span标记在那里没有什么可做的。正如戴维兰德曼所说，显示：无;有一些缺点。 – espenhogbakk 2009-01-29 10:03:40

为什么你摆弄负缩进 - 只需使用img标签的alt属性？

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

来源

2009-01-29 07:55:22

@PartrikHägne：您should't使用display:none，因为有些屏幕阅读器会忽略...

你可以看到http://css-tricks.com的Nine Techniques for CSS Image Replacement列表，其中描述了缺点和优点每个解。

来源

2009-01-29 08:03:33

CSS文字与图片更换，需要超级链接

回答

相关问题