如何在图像中放置链接

Question

我需要喜欢这张图片

正如你在第一张图片中看到的那样，有一个名为review的链接，它位于黑色背景的中心。我想这样做，我做了this way但是链接正在顶部。如何我可以根据图像制作。

Answer 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中查看此代码。

Answer 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