用徽标图像替换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文本

回答

相关问题