Question

如何将div中的图像仅作为背景图像放置，并添加url链接。现在，我这样做：

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

感谢。

Answer 1

如果您想要点击背景图片，请将背景图片放在<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>

Answer 2

这可能是因为div是空的。尝试类似：

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

如果它仍未显示，请将“图像”类设置为具有背景颜色，以便您可以看到div“认为”它有多大。

Answer 3

如果你想要一个图像在你需要设置的背景中，那么样式属性“z-index：-1”，那样，图像将位于同一内容div中其他元素的后面< / p>

Answer 4

它必须是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>

将图像放置为div背景

4 个答案: