用徽標圖像替換H1文本

我希望將我的網站徽標作爲HTML元素和CSS在我的頁面上顯示爲H1元素。另外，我需要使用CSS縮小圖像以符合我的頁面。我怎麼能這樣做呢？用徽標圖像替換H1文本

任何人都可以幫忙嗎？

由於提前，卡勒姆

來源

2011-04-25 Cosmo Posmo

標誌是一個圖像和H1是文本樣式。你能澄清嗎？ – neebz 2011-04-25 17:08:53

我不確定你的問題到底是什麼？基本思想是'

'雖然問題是它有多大的意義，因爲它是一個旨在包含文本內容的語義元素。 – 2011-04-25 17:09:40

所以你在每一頁上都有相同的H1？這是明智的嗎？ – 2011-04-25 17:12:54

這就是你如何能做到：

HTML：

<h1 class="logo">My Company</h1>

CSS：

h1.logo{ 
    display:block; 
    width: 300px; 
    height: 200px; 
    background: url(images/logo.png) 0 0 no-repeat; 
    text-indent: -20000px; 
}

來源

2011-04-25 17:11:23

您可以使用一些免費的在線工具調整圖片大小。 – 2011-04-25 17:18:29

當您將圖片設置爲背景圖片時，您無法設置圖片寬度/高度，但是，如果您有任何類似photoshop或您的工具，則可以設置圖片大小可以使用在線服務，如：http://www.resizeyourimage.com/或http://www.picresize.com/ – 2011-04-25 17:22:16

HTML：

<h1 class="logo">My Logo Text for SEO</h1>

CSS：

.logo { background:url(path/to/image.gif) 0 0 no-repeat; display:block; height:50px; overflow:hidden; text-decoration:none; text-indent:-9999em; width:50px; }

來源

2011-04-25 17:10:21 Seth

可以在CSS元素的背景設置爲一個圖像：

h1 
{ 
    background-image: url('Images/Logo.png'); 
    background-repeat: no-repeat; 
}

它可能會更好地分配一個id到h1標記，並在css中通過id引用元素，或者如果它可以應用於多個h1標記，則使用一個類。

來源

2011-04-25 17:11:18 toby

<h1 style="background-image:url('file.jpg')"></h1>

來源

2011-04-25 17:11:36 Novikoff

應該有一些設置你的'h1'元素的大小，否則它會太小。 – 2011-04-30 11:20:49

用徽標圖像替換H1文本

回答

相關問題