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

Question

Я знаю, что это, наверное, самый глупый вопрос, но я абсолютный новичок в CSS; Как сделать гиперссылку на изображение на веб-странице, используя изображение, полученное из CSS? Я пытаюсь установить заголовок изображения на моем сайте, который можно связать с главной страницей. Спасибо!

Редактировать: Просто чтобы прояснить это, я получаю свое изображение из CSS , код CSS для заголовка div выглядит следующим образом: -

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

Я хочу знать, как сделать эту div гиперссылку на моей веб-странице, не делая ее якорем, а не div.

Answer 1

Вы управляете дизайном и стилями с помощью 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='...'; 
}

Answer 2

Чтобы связать фоновое изображение из 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">

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

Answer 3

Это действительно не вещь 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 для ссылок, как описано другими ответами на этот вопрос.

Answer 4

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 7

Попробуйте это - используйте 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.

Answer 8

Вы должны использовать элемент привязки, завернутый в контейнер. На вашей домашней странице заголовок обычно будет 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 Reset для возможных решений этой проблемы.

Answer 9

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

CSS означает Каскад Стиль Листы - это влияет только на то, как все выглядит.

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

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

Answer 10

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