html - 在 css 中带有图像的图像

Question

如何在 css 和 html 中编写代码？我应该用绝对的吗？或者以某种方式 float 它？有什么想法吗？

Answer 1

我会使用 css 定位来做到这一点，同时牢记良好的标记。所以基本上，让代码反射(reflect)出 <h1>是东部大联盟，每支球队都是名单上的元素。 像这样:

<h1>The Big East</h1>
<ul>
<li>Team 1</li>
<li>Team 2</li>
...
</ul>

通过这种方式，代码对屏幕阅读器有意义并且最符合 SEO 标准。 现在，至于如何排列图像，你完全可以在 CSS 中完成。所以对于 h1 你只需做这样的事情:

h1{background-image:url(images/bigeast.png);text-indent:-9999px;display:block;overflow:hidden;}

缩进只是将文本发送到 h1 之外，因此在保持良好标记完好无损的情况下无法看到它。只需对所有 li 执行相同操作，您就会拥有所有图像。然后简单地将元素上的所有位置设置为绝对位置，并将它们定位在页面上，如 left:238px;和顶部:20px； 我知道这看起来很痛苦，但实际上并没有那么难，特别是如果你使用 Firebug 的话。 有道理吗？