CSS/HTML - 在頁面標題中合併文本和圖像的正確方法

我正在尋找具有頁面標題的最佳方式，該頁面標題顯示圖像，但文本對於搜索引擎可見，並且如果標題圖像不「噸負載。CSS/HTML - 在頁面標題中合併文本和圖像的正確方法

最好的建議谷歌有這個<div>爲<h1>爲標題的文本。在CSS中，使用display:none;隱藏<h1>，並添加圖像作爲<div>的背景圖像。這可能適用於搜索引擎，但如果圖片未加載（或需要時間加載），用戶在頁面頂部看不到任何內容。

所以我真正想要的是一種可見的<h1>文本的方式，當圖像加載時，它覆蓋文本並顯示在它的前面。

另一輪關於如何做到這一點的方法是在圖像加載完成時使用javascript並隱藏文本。這是一個相當尷尬的解決方案，遠非完美。

這樣做的最好方法是什麼？

來源

2010-06-22 shoosh

我不會太在乎圖像沒有加載問題（我可能是烏托邦在這裏）。最重要的部分是文本出現在您的標記中，既適用於搜索引擎，也適用於屏幕閱讀器。

我會保持標記最小（總是一個好主意）

<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; 
}

來源

2010-06-22 16:59:22

我通常基本上這樣做，但與文本也包裹在'一個'，爲另一個直觀的主頁鏈接。 – reisio 2010-06-22 18:12:27

你絕對正確的'''的東西，我也這樣做。此外，在現實生活中，我不使用h1作爲我的網站標題，並將其保留爲當前頁面標題。 – 2010-06-22 21:27:19

這不符合標題將鏈接到主頁的基本需求 – shoosh 2010-06-30 07:53:08

我傾向於使用稍微少純的方法來解決這個問題。

我巢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的被啓用和也有作爲文件運行腳本和應用數學/ CSS有點上的頁面加載頁面閃爍。

該方法確實滿足您的文字可見的要求，直到圖像本身加載，並且它確實使用xhtml和CSS來隱藏文字。如果圖像尺寸是事先知道的，它不需要需要 jQuery/js來防止溢出。

（我的道歉傑夫，喬爾等人，使用SO標誌，沒有任何形式的許可，但它的時候覺得合適的...... =））

來源

2010-06-22 17:46:45

另一種選擇是使用CSS z-index屬性將圖像加載到文本上方 - 文本仍然可見，但隱藏在圖像後面（想想「發送到後面」）。這可能是最低技術解決方案之一:)

來源

2010-06-22 17:50:50 STW

CSS/HTML - 在頁面標題中合併文本和圖像的正確方法

回答

相關問題