html - 如何使用 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>

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

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

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/