CSS Embedded Image как ссылка

Question

У меня есть html-страница, которая использует один и тот же значок много раз, и поэтому я встроил этот значок в качестве фонового изображения в css.

В CSS класс для значка, как это:

.user { 
background-image: url(data:image/png;base64,...encoded png file...); 
background-position: 0 0; 
background-repeat: no-repeat; 
width: 16px; 
height: 16px; 
} 

отобразить иконку с помощью <span class='user'></span> тега, до сих пор, так хорошо.

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

Я попытался:

<a href="www.google.com"><img class="user" src=""></img></a> 

, но это привлекает сломанный значок ссылки на него в Проводнике, это выглядит нормально, но имеет рамку в Chrome. Очевидно, это неправильно.

Я также попытался:

<a href="www.google.com"><span class="user"></span></a> 

и это работает, но курсор мыши не изменяется на указатель, когда над значком.

Что мне делать?

Answer 1

Чтобы установить ширину/высоту и установить cursor, необходимо установить уровень элемента элемента (не менее inline-block). Эти две вещи являются ключевыми компонентами.

.user { 
    background-image: url(data:image/png;base64,...encoded png file...); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    display: inline-block; /* set display so you can set width/height */ 
    cursor: pointer; /* ensure it shows the link cursor */ 
    width: 16px; 
    height: 16px; 
} 

И HTML:

<a href="#urlhere"><span class="user"></span></a> 

Таким образом, вы в конечном итоге с inline-block элементом, который показывает изображение, а затем вы обертку с якорем. Это в основном то же самое, что и обертывание якоря вокруг <img />.

Альтернативно, вы можете сделать это с помощью только <a>. Вы бы использовали тот же самый CSS, с этим HTML:

<a href="#urlhere" class="user"></a> 

Оба должны достичь того, что вам нужно. Разница между этими двумя выборами - это в основном семантика.

Answer 2

Вы можете установить атрибут class на якорный тег.

<a href="#" class="user"></a> 

Answer 3

пытаются добавить этот на ваш CSS

cursor:pointer;/*Link with poniter*/ 

<a href="www.google.com"><span class="user" /></span></a> 

Answer 4

Вы ищете что-то вроде THIS

HTML,:

<a href="http://www.google.com" class="user"></a> 

CSS-:

.user { 
    text-indent: -99999px; 
    background: url("http://www.google.co.in/images/srpr/logo4w.png") no-repeat top left; 
    float: left; 
    overflow: hidden; 
    width: 600px; 
    height: 200px; 
    margin: 10px; 
} 

Надеюсь, это то, что вам нужно.