如何在图像上放置链接？

我在学习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>

来源

2017-02-15 Arminas Šaltenis

什么意思是“把链接放在图像上”？ – DamiToma

我有4个链接到网站的不同部分。这就像导航栏。 –

你想通过点击图像重定向到一个页面吗？ – DamiToma

如果你想放列表的链接内，您的图像区域，你可能会尝试把两个：链接和图像放在一个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>

来源

2017-02-15 15:28:39 Plenarto

这对我有用。谢谢！ –

太好了。 :)如果您将此答案标记为适合您的问题的适当解决方案，我将不胜感激。 – Plenarto

一个简单的方法是用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>

来源

2017-02-15 15:22:42 TheDarkKnight

@OP，你能确认这是否适合你？ – TheDarkKnight

把链接图像上试试这个：

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

来源

2017-02-15 15:23:19

这是很简单的事情。你只需要将你的图片加入标签。例如，如果您想通过点击图片重定向到http://www.google.com，您只需要使用此代码。

<!DOCTYPE html> 
<html> 
<body> 
<a href="http://www.google.com"><img src="IMAGE_URL" alt="Image"></a> 
</body> 
</html>

来源

2017-02-15 15:29:15 DamiToma

如何在图像上放置链接？

回答

相关问题