Question

关于制作好的HTML的问题。说我有一个标题。

<h1>Header</h1>
<p>Hello, World!</p>

这是典型的用法，但是我说标题是一个程式化的文本图像。我会使用带有替代文字的<img/>代码吗？除此之外，这似乎并不正确，因为它不是重要的图像，因为它是正在呈现的文本。唯一使用<img/>的专家是alt属性。有没有办法让<h1>标签与背景图像，但使用CSS有<h1>内的文字消失，仍然是语义正确的？即，我希望HTML显示上述内容，但是当您添加css时，<h1>的内容会消失，而background-image将会接管。

输入，评论，智慧之词？

Answer 1

CSS3扩展颜色值以包含'transparent'关键字，以允许其与所有接受值的属性一起使用。

您可以将color: transparent与CSS3一起使用来隐藏文字，然后将风格化的标题图像渲染为background-image。

但是，要使用CSS2，最好将<img>与title属性和alt一起使用：

ALT属性旨在成为图像的替代文本描述。在主要浏览器中加载图像（如果它已加载）之前显示ALT文本，而不是像Lynx这样的基于文本的浏览器中的图像。

相比之下，您可以将TITLE属性用于任何页面元素，但任何页面元素都不需要它。用它来描述链接，表格，单个表格行和其他结构HTML元素。它们比ALT属性更通用，许多搜索引擎排名算法将TITLE属性中的文本作为常规页面内容读取。

我想补充一点，没有明确的答案。在这个问题上，每个人都有自己的解释和意见，而且这个问题没有“黄金法则”。但是，请尝试查看其他一些网站并从中学习。

Answer 2

h1{
background:url("bg.png") no-repeat;
width:"some value";
height:"some value";
text-indent:-9999px;
}

将此CSS用于H1标签。

Answer 3

我会投票使用CSS来掩盖h1中带有图像的文本，你将如何完全不同的问题。您可以在H1中使用图像，但这会冒犯SO上的纯粹主义者。你能以某种方式使用像http://code.google.com/apis/webfonts/这样的字体api来显示花哨的排版并使语义纳粹快乐吗？

Answer 4

我会做<h1><img src="..." alt="..." /></h1>。它在语义上描述它是一个标题，并为用户提供带有替代文本的图像。或者同样有效，你可以将文本作为h1并用css隐藏它并给它一个背景图像。

Answer 5

实际上，至少从2010年开始，就此存在一种“黄金法则”：

如果可能的话，最好避免使用“text-indent：-9999px”或“margin：-4000px”或“left：-2000em”等技术。

Google拥有绝密算法，旨在检测何时隐藏/定位屏幕外的文字。如果检测到这种类型的隐藏文本，我们重要的红色电话会响起，这将成为可能导致我们认为您的网站具有欺骗性的信号之一。

http://maileohye.com/html-text-indent-not-messing-up-your-rankings/

他们提到了毛巾日，所以你知道它是合法的。

最好在h1标签中使用带有替代文字的语义图片标记。

渲染标题图像。从语义上讲，我应该使用img标签还是背景？

5 个答案: