Question

这可能是有史以来最简单的问题，但试试我可能根本无法理解。我现在正在开发一个网站，我希望尽可能少地使用<div>元素来保持HTML漂亮且易于编辑。目前我基本上有：

<html doctype etc etc>
<head>
    <title and meta tags>
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="body"></div>
        <div id="sidebar"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

非常简单而优雅，是吗？但是，客户希望他们的标题包含一个包含公司名称和徽标的大图像。所以我的选项很明确 - 要么使用<img>标记，要么在标题background-image上设置<div>属性。然而，我开始考虑SEO。为了谷歌的缘故，如果标题<div>包含一个带有她网站标题的<h1>元素会很好，但是这个元素必须被隐藏，以便人类用户只能看到背景图像。

虽然如果您使用display:none; css属性，则整个<div>会消失，包括背景。有没有隐藏<div>本身的<div>内容的好方法？

Answer 1

您是否尝试在H1本身上应用隐藏？

<div id="header">
    <h1>Company title</h1>
</div>

你的风格是：#header h1{display:none;visibility:hidden;}

UPDATE 显然，我们都只是在那些日子里。如果你想让H1真正的SEO /屏幕阅读器友好，那么最好用你的CSS做到这一点：

#header h1{
    width:XXXpx;
    hight:XXXpx;
    background:url('image/location.png');
    text-indent:-9999px;
    overflow:hidden;
}

这样你的文字实际上就在页面上并被渲染，它只是屏幕外的一种。

Answer 2

如果您想要此标记，可以将#header div替换为h1 div，在所述h1上设置背景图片，甚至在其中放入一些文本（公司名称）并使用{{1隐藏它。

另外，在您最小化元素数量的过程中，您可以使用text-indent作为包装器，如果您需要在body元素上设置完整页面背景。

Answer 3

在H1标签而不是div上设置display: none，并使用div上的背景图像。

隐藏内容而不隐藏div？

3 个答案: