如何使用 CSS 在图像上添加按钮？

Question

我是 CSS 的新手，如果这个问题只是愚蠢或太简单，我很抱歉，但我只是不知道该怎么做。

我需要在图像上放置一个按钮，它应该是这样的：

你看到那里有一个蓝色按钮“Kopit”，就是这样！我已经在我的网站上设计了这个东西但是作为一个单一的图像所以我的代码看起来像：

CSS：

 #shop{
    background-image: url("images/shop_bg.png");
    background-repeat: repeat-x;
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#shop .content{
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;

}

我的 HTML：

  <div id="shop">
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
      <div class="content"> Counter-Strike 1.6 Steam <a href="#"><img src="images/CSsteam.png"></a></div>
  </div>

这里有人可以帮助我将该按钮设置为不同的元素吗？

非常感谢您阅读这篇文章。

原文由 user258459 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果我理解正确的话，我会把 HTML 改成这样：

 <div id="shop">
    <div class="content">
        <img src="http://placehold.it/182x121"/>
        <a href="#">Counter-Strike 1.6 Steam</a>
    </div>
</div>

然后我就可以使用 position:absolute 和 position:relative 强制按下蓝色按钮。

我创建了一个 jsfiddle：http: //jsfiddle.net/y9w99/

原文由 TryingToImprove 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使此示例适应您的代码

HTML

 <div class="img-holder">
    <img src="images/img-1.png" alt="image description"/>
    <a class="link" href=""></a>
</div>

CSS

 .img-holder {position: relative;}
.img-holder .link {
    position: absolute;
    bottom: 10px; /*your button position*/
    right: 10px; /*your button position*/
}

原文由 AlexPrinceton 发布，翻译遵循 CC BY-SA 3.0 许可协议