2011-01-12 2 views
-2

Как разместить только изображение в div как фоновое изображение и добавить ссылку на него. CurrentY Я делаю это так:размещение изображения в качестве фона div

<div class="image"><a href="example.com"><img src="books.png" alt="Test" /></a></div> 

Я хочу сделать что-то вроде следующего, но не работает (изображение не появляется).

<div class="image"><a href="example.com"><span class="books"></span></a></div> 

Спасибо.

+0

Какой CSS вы используете для своих классов изображений и книг? –

+0

Вы принимаете решения CSS? – amosrivera

+0

Если вы хотите, чтобы изображение было ссылкой, вам нужно сообщить человеку, который смотрит на страницу, на которой идет ссылка. Для этого требуется ** контент **. Если вы хотите использовать изображение в качестве этого содержимого, используйте элемент ''. Фон неуместен. – Quentin

ответ

3

Поместите фоновое изображение в тег <a>, если вы хотите его щелкнуть мышью.

ваш CSS:

.image a { display: block; 
    background: url('image.jpg') no-repeat; 
    height: 50px; /* obviously use the same dimensions as your image */ 
    width: 50px; /* obviously use the same dimensions as your image */ 
} 


<div class="image"><a href="example.com">&nbsp;</a></div> 

или еще лучше, чтобы избавиться от DIV полностью, и просто применить image класс непосредственно к:

<a class="image" href="example.com">&nbsp;</a> 
0

Скорее всего, это потому, что div пуст. Попробуйте что-то вроде:

<div class="image"><a href="example.com"><span class="books">&nbsp;</span></a></div> 

Если это все еще не отображается, установите класс «изображения», чтобы иметь цвет фона тоже, так что вы можете увидеть, насколько большой ДИВ «думает» это.

0

Если вы хотите, чтобы изображение было в фоновом режиме, вам необходимо установить свойство стиля «z-index: -1», то образ будет находиться в обратном порядке от других элементов в том же содержимом div

0

ли это быть DIV?

Я пишу стиль внутри вы можете использовать его в CSS файле

<a class="image" style="display:block; width: (image-width); height: (image-height); background: url(image-link)"></a> 

это будет работать ...

вы можете использовать его, как это, если вам нужно DIV ..

<div class="image" style="width: (image-width); height: (image-height); background: url(image-link)"><a href="" style="display:block;"></a></div> 
Смежные вопросы