使用CSS超链接图像 [英] Hyperlinking an image using CSS

问题描述

我知道这可能是最蠢的问题，但是我是一个初学者，当谈到CSS;如何使用源自CSS的图像超链接网页上的图像？我试图设置我的网站上的标题图像可链接到首页。非常感谢！

I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!

编辑：为了清楚起见，我将从CSS 头div的代码如下： -

Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-

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

我想知道如何制作这个

I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.

推荐答案

您可以使用CSS控制设计和样式，而不是使用CSS来控制设计和样式您的内容的行为。

You control design and styles with CSS, not the behavior of your content.

您必须使用< a id =headerhref =[your link]> ; / a> 然后有一个CSS块，如：

You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:

a#header {
  background-image: url(...);
  display: block;
  width: ..;
  height: ...;
}

您不能嵌套 div < a> ，并且仍然具有有效代码。 < a> 是不能合法包含块元素的内联元素。唯一非JavaScript的链接方式是使用< a> 元素。

You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.

您可以将< a> 嵌入< div& code>，然后把你的形象里面：）

You can nest your <a> tag inside <div> and then put your image inside :)

如果你不想要，你将不得不使用JavaScript，使你的< c $ c>< div> clickable：

If you don't want that, you're going to have to use JavaScript to make your <div> clickable:

Document.getElementById("header").onclick = function() {
    window.location='...'; 
}

这篇关于使用CSS超链接图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！