如何在图片中添加链接答案

【问题标题】：How to put links in images如何在图片中添加链接
【发布时间】：2014-03-10 06:39:07
【问题描述】：

我必须喜欢这张图片

正如您在第一张图片中看到的那样，有一个名为 review 的链接，它位于黑色背景的中心。我想这样做，我做了 this way 但链接在顶部。我该怎么做按照图片制作。

【问题讨论】：

这样的问题使 stackoverflow 令人沮丧。所以叠加层就是一个链接？
@Ryan 抱歉我没听懂你
看看this fiddle
@HarshShah 哇很好，你可以发布这个作为答案，我会接受

标签： html css

【解决方案1】：

这样做

.outer {
    width: 89px;
    height: 89px;
    -webkit-box-shadow: 0px 0px 10px #4d4d4d;
    -moz-box-shadow: 0px 0px 10px #4d4d4d;
    box-shadow: 0px 0px 10px #4d4d4d;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    border: solid white 3px;
    overflow: hidden;
    padding: 10px;
}

.image {
    background: red;
    padding: 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.bg {
    background: url("http://www.computerhope.com/logo.gif");
    width: 69px;
    height: 69px;
}

    .bg a {
        margin-top: 40px;
        padding-left: 10px;
        color: #ffffff;
    }

和

<div class="outer">
    <div class="image">
      <div class="bg"><br />
        <a href="http://www.google.com">
          Review
        </a>
      </div>
    </div>
</div>

在 jsfiddle 中查看此代码。

【讨论】：

他正在编写这种类型的代码，所以我只需编辑一个 lil 并粘贴它。
评论正在显示，但是否可以在鼠标悬停时显示？

【解决方案2】：

<img src="http://lorempixel.com/200/200/" />
<div><a href="#">Some Text</a></div>
<img src="http://lorempixel.com/200/200/" />
<div class="div"><a href="#">Text</a></div>

这里是 CSS

div {
    position:absolute;
    top:100px;
    left:100px;
    background:black;
    opacity:0.5;
}
.div {
    position:absolute;
    top:100px;
    left:300px;
    background:black;
    opacity:0.5;
}
a {
    text-decoration:none;
    color:red;
}

看看这个fiddle demo

【讨论】：

请将您的代码放入您的答案中，而不仅仅是指向 JSFiddle 的链接。
我得了-1，请给+1
@Charlie 添加代码 :)
@HarshShah 是否可以在鼠标悬停时显示文本>
@rocking It Is...这里是the fiddle，您正在寻找的内容...也看看this question