Замена текста H1 изображением логотипа

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы логотип моего сайта отображался в виде элемента H1 на моей странице с помощью HTML и CSS. Кроме того, мне нужно, чтобы изображение было уменьшено с помощью CSS, чтобы оно соответствовало моей странице. Как я могу это сделать?

Кто-нибудь может помочь?

Заранее спасибо, Каллум

1. логотип — это изображение, а H1 — стиль текста. Не могли бы вы пояснить?

2. Я не уверен, в чем именно заключается ваш вопрос? Основная идея заключается в том, <h1><img src="..."></h1> хотя вопрос в том, насколько это имеет смысл, учитывая, что это семантический элемент, предназначенный для размещения текстового содержимого.

3. То есть у вас один и тот же H1 на каждой странице? Разумно ли это?

Ответ №1:

Вот как вы можете сделать:

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

1. ну, вы не можете установить ширину / высоту изображения, когда вы устанавливаете его в качестве фонового изображения, однако вы можете установить размер изображения, если у вас есть какой-либо инструмент, такой как photoshop, или вы можете воспользоваться онлайн-сервисом, таким как: resizeyourimage.com или picresize.com

Ответ №2:

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

Ответ №3:

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

Ответ №4:

Вы можете установить фон элемента в качестве изображения в CSS:

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

Вероятно, было бы лучше присвоить h1 тегу идентификатор и ссылаться на элемент по идентификатору в css или использовать класс, если он может применяться к нескольким h1 тегам.