如何在图片中添加链接

Posted 2023-05-08

【中文标题】如何在图片中添加链接

【英文标题】：How to put links in images

【发布时间】：2014-03-10 06:39:07

【问题描述】：

我必须喜欢这张图片

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

【问题讨论】：

这样的问题使 *** 令人沮丧。所以叠加层就是一个链接？

@Ryan 抱歉我没听懂你

看看this fiddle

@HarshShah 哇很好，你可以发布这个作为答案，我会接受

【参考方案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