Гиперссылка на изображение с помощью CSS

На самом деле это не CSS. Вам по-прежнему нужен тег A, чтобы это работало. (Но используйте CSS, чтобы убедиться, что граница изображения либо удалена, либо спроектирована в соответствии с вашими требованиями.)

<a href = "index.html"><img src = "foo" class = "whatever" alt = "foo alt" /></a>

Обновлено: принимая во внимание исходное намерение (обновленный вопрос), ниже приведен новый образец кода:

<a href = "index.html"><img id = "header" alt = "foo alt" /></a>

Вы все еще находитесь в мире HTML для ссылок, как описано в других ответах на этот вопрос.

Вы по-прежнему создаете ссылки в HTML с помощью тегов 'a' (привязки), как обычно. В CSS нет ничего, что могло бы указать, является ли что-то ссылкой на что-то или нет.

Редактировать Мои и другие комментарии все еще применимы. Чтобы уточнить, вы можете использовать JavaScript, чтобы div действовал как ссылка:

<div id = "header" onclick = "window.location='http://google.com';">My Header</div>

Однако это не очень удобно для удобства использования, поскольку люди без включенного JavaScript не смогут щелкнуть по нему и заставить его действовать как ссылку.

Кроме того, вы можете добавить строку cursor: pointer; в свой CSS, чтобы дать заголовку div правильный курсор мыши для ссылки.

Вы управляете дизайном и стилями с помощью CSS, а не поведением вашего контента.

Вам нужно будет использовать что-то вроде <a id = "header" href = "[your link]">Logo</a>, а затем иметь блок CSS, например:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

Вы не можете вложить div в <a> и по-прежнему иметь «действующий» код. <a> - это встроенный элемент, который юридически не может содержать блочный элемент. Единственный способ создать ссылку без использования Javascript - использовать элемент <a>.

Вы можете вложить свой тег <a> в <div>, а затем поместить свое изображение внутрь :)

Если вы этого не хотите, вам придется использовать JavaScript, чтобы сделать <div> интерактивным:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

CSS предназначен только для презентации, а не для содержания. Ссылка является содержимым и должна быть помещена в HTML-код сайта с помощью стандартного тега <a href = "">. Затем вы можете стилизовать эту ссылку (или добавить изображение к ссылке) с помощью CSS.

<a href = "linkto_title_page.html" class = "titleLink"></a>

тогда в вашем css

.titleLink {
  background-image: url(imageUrl);
}

Чтобы связать фоновое изображение из CSS:

#header { 
display:block;

margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;    
}    

<a id = "header" href = "blah.html" class = "linkedImage">

Ключевым моментом здесь является превращение тега привязки в элемент блока, чтобы высота и ширина работали. В противном случае это встроенный элемент, и высота будет игнорироваться.

HTML - единственный способ создания ссылок - он определяет структуру и содержание веб-сайта.

CSS расшифровывается как Cascading Стиль Sheets - он влияет только на внешний вид.

Хотя обычно <a/>; Это единственный способ создать ссылку, вы можете сделать <div/> интерактивным с помощью JavaScript. Я бы использовал jQuery:

$("div#header").click(function() {window.location=XXXXXX;});

Вы должны использовать элемент привязки, завернутый в контейнер. На вашей домашней странице ваш заголовок обычно будет h1, но затем на страницах с контентом он, вероятно, изменится на div. Вы также должны всегда иметь текст в элементе привязки для людей без поддержки CSS и / или программ чтения с экрана. Самый простой способ скрыть это - использовать CSS. Вот оба примера:

<h1 id = "title"><a title = "Home" href = "index.html>My Title</a></h1>
<div id = "title"><a title = "Home" href = "index.html>My Title</a></div>

и CSS:

#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}

В зависимости от остальной части вашей таблицы стилей вам может потребоваться отрегулировать ее для h1, чтобы он выглядел так же, как div, посмотрите возможные решения этой проблемы в разделе «Сброс CSS».

Попробуйте это - вместо этого используйте H1 в качестве места для вашего рисунка. Спасал мою задницу снова и снова:

<h1 class = "technique-six">
    CSS-Tricks
</h1>

h1.technique-six {
    width: 350px;
    padding: 75px 0 0 0;
    height: 0;
    background: url("images/header-image.jpg") no-repeat;
    overflow: hidden;
}

Доступен и надежен в браузерах IE6 и>. Вы также можете связать H1.

Извините, что испортил вам веселье, дамы и господа, это возможно.

Write in your header: [link](http://"link here")

then in your css:

#header a[href = "https://link here"] {
          display: inline-block;
          width: 75px;
          height: 75px;
          font-size: 0;
        }
        .side .md a[href = "link here"] {
          background: url(%%picture here%%) no-repeat;
        }