Question

我正在学习HTML，CSS和Javascript，并试图建立一个网站。现在我想做的是将链接放在图像上，它应该是这样的：

现在，我做了我的链接的样式，我试图把位置绝对和相对，但没有任何作用。一切都把这些链接放在图像之前。这是我的HTML和CSS代码。也许我做错了什么。

body {
  background-image: url("img/bg.png");
  margin: 0px 0px 0px 0px;
}
img {
  width: 100%;
  background: no-repeat;
  position: relative;
}
#header #nav {
  float: right;
}
a {
  font-family: 'Open Sans Condensed', sans-serif;
  border: none;
  background-color: transparent;
  font-size: 20px;
  color: black;
  text-decoration: none;
  margin-left: 30px;
  margin-right: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
a:focus,
a:hover {
  color: #bebcc1;
}

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
</head>

<body>
  <div id="header">
    <div id="nav">
      <a href="google.lt">Meniu</a>
      <a href="google.lt">Istorija</a>
      <a href="google.lt">Atsiliepimai</a>
      <a href="google.lt">Kontaktai</a>
    </div>
    <img src="img/sumustinis.jpg">
  </div>
</body>

</html>

Answer 1

一种简单的方法是使用anchor标记包裹图像。

body {
  background-image: url("img/bg.png");
  margin: 0px 0px 0px 0px;
}
img {
  width: 100%;
  background: no-repeat;
  position: relative;
}
#header #nav {
  float: right;
}
a {
  font-family: 'Open Sans Condensed', sans-serif;
  border: none;
  background-color: transparent;
  font-size: 20px;
  color: black;
  text-decoration: none;
  margin-left: 30px;
  margin-right: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
a:focus,
a:hover {
  color: #bebcc1;
}

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <link type="text/css" rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700" rel="stylesheet">
</head>

<body>
  <div id="header">
    <div id="nav">
      <a href="google.lt">Meniu</a>
      <a href="google.lt">Istorija</a>
      <a href="google.lt">Atsiliepimai</a>
      <a href="google.lt">Kontaktai</a>
    </div>
    <a href="#"><img src="img/sumustinis.jpg"></a>
  </div>
</body>

</html>

Answer 2

将链接放在图像上试试这个：

<a href="http://stackoverflow.com"><img src="#" alt="img"></a>

Answer 3

如果你想在图像区域内放置包含链接的列表，你可能会尝试将两者：链接和图像放在div中。

.container {
  position: relative;
  }

.container img {
  width: 100%;
  }

.links {
  position: absolute;
  top: 0;
  left: 0;
  }

<div class="container">
  <img src="http://placehold.it/300x300">
  <div class="links">
    <ul>
      <li> test </li>
      <li> test </li>

     </ul>
  </div>
</div>

Answer 4

这很简单。您只需将图像包含在标记中即可。例如，如果您想通过点击图片重定向到http://www.google.com，则只需使用此代码。

python_package

如何在图像上放置链接？

4 个答案: