带有背景图像且无文本的 XHTML 锚链接

发布于 2024-10-12 16:31:17 字数 344 浏览 3 评论 0原文

是否有可能有锚链接，里面没有文字，有背景图像和固定尺寸，并且仍然有利于搜索引擎优化？

CSS 示例：

a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}

a:hover img{background-position:0 -20px;}

HTML 示例：

原文

Is it possible to have anchor links no text inside that has a background image and fixed dimensions and still be good for SEO?

Example CSS:

a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}

a:hover img{background-position:0 -20px;}

Example HTML:
<a href="#"></a>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江城子 2024-10-19 16:31:17

如果图像中包含文本，或者您只是想添加其描述，您可以做的一件事是帮助 SEO 和可访问性，即为锚点提供带有大负文本缩进的标题和内容，例如将其添加到您的 a CSS:

display:block;
text-indent:-9999em;

...使用以下 HTML：

<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>

If the image has text in it or you simply want to add its description, one thing you can do to help SEO and accessibility is to give the anchor a title and content with a large negative text-indent, like adding this to your a CSS:

display:block;
text-indent:-9999em;

...with the following HTML:

<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>

回复收藏 0 原文

征棹 2024-10-19 16:31:17

受到 neXib 对另一个答案的评论的启发。

HTML：

<a href="/home" title="Homepage" class="home">
    <div><img src="/images/sprite.png" alt="Home" /></div>
</a>

CSS：

a {
    display: block;
}
.home div {
    width: 84px;
    height: 27px;
    overflow: hidden;
    position: relative;
}
.home div img {
    position: absolute;
    top: -65px;
    left: -20px;
}

只要 div 具有“溢出：隐藏”和固定尺寸，内部图像就可以定位在其中，以仅显示您想要的精灵部分。

SEO 也是我关心的一个问题，我认为这个解决方案会很好用。

Inspired by neXib's comment on another answer.

HTML:

<a href="/home" title="Homepage" class="home">
    <div><img src="/images/sprite.png" alt="Home" /></div>
</a>

CSS:

a {
    display: block;
}
.home div {
    width: 84px;
    height: 27px;
    overflow: hidden;
    position: relative;
}
.home div img {
    position: absolute;
    top: -65px;
    left: -20px;
}

So long as the div has 'overflow: hidden' and fixed dimensions the image inside can be positioned within to only display the part of the sprite you want.

SEO was a concern for me too and I think this solution will work fine.

回复收藏 0 原文