Как добавить URL к изображению css?

0

У меня есть следующие css и html:

CSS:

<style>
#sprite {
    height:30px;
    width: 40px;
    background: url(/images/forCSS/sprites.png) no-repeat;
    background-position: 0px -465px; /*152 i unit*/
    border:1px solid;
}

HTML:

<div id="sprite">
</div>

На этом div отобразите изображение.

Как добавить URL-адрес этого изображения?

Благодарю!

  • 0
    какой желаемый результат?
  • 1
    Я не понимаю, что ты хочешь делать? Вы уже используете фоновое изображение
Показать ещё 1 комментарий
Теги:

5 ответов

2
Лучший ответ

Вы имеете в виду это?

<a href="url">
   <div id="sprite"></div>
</a>

#sprite {
    height:30px;
    width: 40px;
    background: url(/images/forCSS/sprites.png) no-repeat;
    background-position: 0px -465px; 
    border:1px solid;
    float:right; /* add this */
}

или вы можете сделать это:

$('#sprite').click(function(){
  window.location = url;
});
  • 0
    огромное спасибо
  • 0
    Зачем тебе это делать? Вы можете просто использовать обычный HTML для этого, я не вижу причин делать это таким образом. OP и @sapphireNK объясняют мне необходимость использования jQuery для ссылки? Я явно что-то здесь упускаю.
Показать ещё 3 комментария
1

Если вы попросите поместить ссылку через CSS в этот div, насколько мне известно, это невозможно. Возможны следующие варианты:

HTML:

Оберните div в <a>

<a href="https://www.google.com/"><div></div></a>

CSS:

div {
    background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
    width: 570px;
    height:150px;
}

ДЕМО ЗДЕСЬ


Или мы можем поместить <a> внутри div и установить его height и width + display: block; , Это лучший вариант и имеет действительный синтаксис. Один выше работает, но это больше или взломать, чем угодно.

HTML:

<div><a href="https://www.google.com/"></a></div>

CSS:

div {
    background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
    width: 570px;
    height:150px;
}
a {
    width: 100%;
    height: 100%;
    display: block;
}

ДЕМО ЗДЕСЬ

Надеюсь это поможет.

0

CSS

#sprite {
 height:30px;
 width: 40px;
 background: url(http://omegazelda.files.wordpress.com/2008/04/orace-and-minish-sprite.png) no-repeat;
 background-position: 0px -465px; /*152 i unit*/
 border:1px solid;
}

HTML

   <a href="http://www.google.com"><div id="sprite"></div></a>

DEMO

0

Насколько я знаю, вы не можете добавить URL-адрес через css. Можно использовать JavaScript, но см. Как динамически добавлять метки привязки в div в Javascript?

-1

Code-

<div id="sprite">
   <a href="#" class="invisibleLink"></a>
</div>

CSS-

#sprite {
height:30px;
width: 40px;
background: url(/images/forCSS/sprites.png) no-repeat;
background-position: 0px -465px; /*152 i unit*/
border:1px solid;
}
.invisibleLink{
display:block;
height: 30px;
width: 40px;
}

  • 0
    не работа.......
  • 0
    Проверь сейчас. Я добавляю соответствующий CSS.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню