代码之家 › 专栏 › 技术社区 › shoosh

CSS/HTML-在页眉中组合文本和图像的正确方法

css html

shoosh · 技术社区 · 14 年前

我正在寻找一种最佳的方式,有一个页面标题,显示一个图像,但与文本可见的搜索引擎,以防头像没有加载。

谷歌对此最好的建议是 <div> 对于带有 <h1> 为了文本。在CSS中,隐藏 <h1> 具有 display:none; 并将图像添加为 <分区> . 这可能对搜索引擎有效,但如果图像没有加载(或加载需要时间),用户在页面顶部看不到任何内容。

所以我真正想要的是 <h1> 文本,当图像加载时,它覆盖文本并显示在其前面。

另一种方法是使用javascript并在图像加载完成时隐藏文本。这是一个相当尴尬的解决方案,远远不够完美。

最好的方法是什么?

3 回复 | 直到 14 年前

Guillaume Esquevin 14 年前

我不会太在意图像不加载的问题(我可能是这里的乌托邦主义者)。最重要的一点是,无论是搜索引擎还是屏幕阅读器,文本都会出现在标记中。

我会保持最小的标记(总是一个好主意)

<h1>Title of your page</h1>

在CSS中

h1 {
    text-indent: -10000px; /* Will hide text from users, while still showing for search engines/screen readers */
    background: url('../images/logo.png') no-repeat left top;
    width: 200px; /* your image dimensions */
    height: 50px;
}

David Thomas 14 年前

我倾向于用一种稍微不那么纯粹的方法来解决这个问题。

我将图像嵌套在h1中,以给出以下标记:

<div id="header">
        <h1>This is the header<img src="img/stackoverflowLogo.png" /></h1>
</div>

然后使用CSS定位 <h1> 相对的,图像 position:absolute . 这将导致图像从文档流中取出并移动到其父元素文本的“上方”。我使用的CSS是(类似于):

#header h1
    {position: relative;
    border: 0 none transparent;
    font-size: 2em;
    margin: 1em auto;
    border: 1px solid #ccc;
    }
#header img
    {position: absolute;
    top: 0;
    left: 0;
    }

我在这里发布了一个演示: http://www.davidrhysthomas.co.uk/so/h1Img.html .

第一部分显示了第一步,将图像相对于其父图像进行定位,该图像具有透明背景,以便了解正在发生的事情。

在第二和第三部分中,我使用jQuery将 <h1> 尺寸等于图像的尺寸,以防止(如第一个版本中的) <h1> 超出图像本身的文本,如下所示:

$(window).load(
    function() {
        var w = $('#logo').outerWidth();
        var h = $('#logo').outerHeight() ;

        $('#two h1').css('width',w,'height',h);
        $('#three h1').css('width',w,'height',h);
    }
);

它有点笨拙,显然依赖于javascript的启用和也当文档运行脚本并应用math/css时,页面加载时会有一点页面闪烁。

该方法确实满足了在加载图像之前让文本可见的要求,并且它确实使用xhtml和CSS隐藏文本。如果事先知道图像的尺寸要求防止溢出的jQuery/js。

(我向杰夫、乔尔等人表示歉意,因为他们未经任何许可使用了SO标志,但当时觉得很合适。。。=) )

STW 14 年前

另一种选择是使用 z-index CSS属性使图像加载到文本的上方——文本仍然可见,但隐藏在图像后面(考虑“向后发送”)。这可能是技术含量最低的解决方案之一:)